Flexbox Mastery
22 min read
Flexboxjustify-contentalign-itemsflex-growflex-shrinkflex-basisgapflex-wrap
One-Dimensional Layouts Made Easy
Flexbox is designed for one-dimensional layouts — either a row OR a column. It excels at distributing space and aligning items within a container.
The Two Axes
| Axis | Direction (row) | Direction (column) | Controlled By |
|---|---|---|---|
| Main Axis | Horizontal → | Vertical ↓ | justify-content |
| Cross Axis | Vertical ↓ | Horizontal → | align-items |
Container Properties
| Property | Values | Effect |
|---|---|---|
flex-direction | row | column | row-reverse | column-reverse | Sets main axis direction |
justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Distributes items along main axis |
align-items | stretch | flex-start | center | flex-end | baseline | Aligns items on cross axis |
flex-wrap | nowrap | wrap | wrap-reverse | Controls overflow wrapping |
gap | Any length | Space between items (modern, replaces margins) |
Item Properties — The flex Shorthand
The flex property is shorthand for three values:
flex: [grow] [shrink] [basis];
flex: 1 1 0%; /* Grow, shrink, start from 0 */
flex: 0 0 auto; /* Don't grow, don't shrink, use content width */| Property | Default | What It Does |
|---|---|---|
flex-grow | 0 | How much extra space this item should take (ratio) |
flex-shrink | 1 | How much this item should shrink if space is tight |
flex-basis | auto | The starting size before grow/shrink kicks in |
Common Patterns
Holy Grail Layout: Header, 3-column content, footer — all with Flexbox.
Sticky Footer: Footer always at the bottom, even with little content.
Equal Height Cards: All cards in a row match the tallest card's height (default align-items: stretch).