Flexbox Patterns - 16 Layouts with Live Code | IconVault
16 production flexbox patterns: Holy Grail, sticky footer, card grids, navbars. Live previews, adjustable gaps, copyable HTML and CSS. Free.
Flexbox Patterns
16 layouts: Holy Grail, sticky footer, card grids
Holy Grail
Classic header, three columns, footer. The flexbox rite of passage.
Code
<!-- Holy Grail -->
<header class="hg-header">Header</header>
<div class="hg-main">
<nav class="hg-nav">Nav</nav>
<main class="hg-content">Content</main>
<aside class="hg-aside">Aside</aside>
</div>
<footer class="hg-footer">Footer</footer>
<style>
.holy-grail { display: flex; flex-direction: column; min-height: 100%; }
.hg-main { display: flex; flex: 1; }
.hg-nav, .hg-aside { flex: 0 0 120px; }
.hg-content { flex: 1; }
</style>5 of 5 free copies left.
About this tool
IconVault's Flexbox Patterns is a visual cookbook of the layouts you build every week. Pick from 16 battle-tested patterns, from the classic Holy Grail and sticky footer to card grids, split heroes, media objects, pricing rows and chat layouts, and see each one render live in your browser.
Every pattern ships with copyable HTML and CSS you can drop straight into a project, plus an adjustable gap slider on the patterns where spacing matters. Everything is free and runs fully in your browser: no signup, no build step, no framework lock-in. Download all sixteen patterns as one CSS file when you are done.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon