Flexbox is a 1D layout system. The container controls overall layout. Items control their own sizing. Think: flex-direction sets the main axis, everything else flows from that.
| Element / Property | Syntax / Values | Description |
|---|---|---|
| display: flex | display: flex | Enable flex layout on container |
| flex-direction | row | row-reverse | column | column-reverse | Main axis direction |
| flex-wrap | nowrap | wrap | wrap-reverse | Allow items to wrap to next line |
| flex-flow | flex-flow: row wrap | Shorthand for direction + wrap |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Main axis alignment |
| align-items | stretch | flex-start | center | flex-end | baseline | Cross axis alignment (all items) |
| align-content | flex-start | center | space-between ... | Cross axis alignment (multiple lines) |
| gap | gap: 16px | Space between flex items (replaces margin hacks) |
| flex-grow | flex-grow: 1 | How much item grows relative to siblings |
| flex-shrink | flex-shrink: 0 | How much item shrinks (0 = never shrink) |
| flex-basis | flex-basis: 200px | auto | Initial size before grow/shrink |
| flex shorthand | flex: 1 / flex: 0 0 200px / flex: 1 1 auto | grow shrink basis shorthand |
| align-self | auto | flex-start | center | flex-end | stretch | Override align-items for one item |
| order | order: 2 | Visual order (default 0, lower = earlier) |
| place-items | place-items: center | Shorthand for align-items + justify-items (Grid too) |
Save as .html or .css and open in any browser.
/* Flexbox Patterns Cheatsheet */
/* ── Center anything ────────────────────────────────────────── */
.center-child {
display: flex;
align-items: center;
justify-content: center;
}
/* ── Navigation bar ─────────────────────────────────────────── */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 24px;
height: 60px;
background: #1e293b;
}
.navbar .logo { font-weight: 700; font-size: 1.2rem; }
.navbar .links { display: flex; gap: 16px; }
.navbar .actions { display: flex; gap: 8px; margin-left: auto; }
/* ── Card grid (responsive) ─────────────────────────────────── */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}
/* ── Sidebar layout ─────────────────────────────────────────── */
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 0 0 240px; /* fixed width — never grow or shrink */
background: #1e293b;
}
.content {
flex: 1; /* take all remaining space */
padding: 24px;
}
/* ── Sticky footer ──────────────────────────────────────────── */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; } /* push footer to bottom */
footer { flex-shrink: 0; }
/* ── Equal-height cards ─────────────────────────────────────── */
.card-row {
display: flex;
align-items: stretch; /* default — makes all cards same height */
gap: 16px;
}
.card { display: flex; flex-direction: column; }
.card .body { flex: 1; } /* body expands to fill height */
.card .footer { margin-top: auto; } /* footer always at bottom */
/* ── Holy grail layout (flex version) ──────────────────────── */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page-body { display: flex; flex: 1; }
.page-nav { flex: 0 0 200px; }
.page-main { flex: 1; }
.page-aside { flex: 0 0 200px; }