You met Flexbox basics in the beginner level. Now we go deep: the full set of properties that let you build any one-dimensional layout — toolbars, card rows, split screens and more — with total control.
The two axes
Flexbox works along a main axis and a cross axis. <code>flex-direction</code> sets the main axis: <code>row</code> (default, horizontal) or <code>column</code> (vertical). Everything else — alignment, growth — is described relative to these axes, so getting this clear makes the rest easy.
| Property | Controls |
|---|---|
| flex-direction | Main axis: row or column |
| justify-content | Alignment along the main axis |
| align-items | Alignment along the cross axis |
| flex-wrap | Whether items wrap to new lines |
| gap | Space between items |
Direction and wrapping
By default flex items stay on one line and shrink to fit. <code>flex-wrap: wrap</code> lets them flow onto new lines when space runs out — essential for responsive card rows.
<div class="row"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>.row{display:flex;flex-wrap:wrap;gap:10px}
.row div{background:#2563eb;color:#fff;padding:18px 22px;border-radius:8px}The flex shorthand: grow, shrink, basis
The <code>flex</code> property on items controls how they share space: <code>flex-grow</code> (how much to grow), <code>flex-shrink</code> (how much to shrink) and <code>flex-basis</code> (the starting size). <code>flex: 1</code> means "grow to fill equally" — the most common value.
<div class="row"><div class="a">flex: 1</div><div class="b">flex: 2</div></div>.row{display:flex;gap:10px}
.row div{background:#0ea5e9;color:#fff;padding:18px;border-radius:8px;text-align:center}
.a{flex:1}
.b{flex:2}Aligning a single item
While <code>align-items</code> aligns all items, <code>align-self</code> overrides it for one item — handy for pushing a single element to the bottom or top of a row.
.item { width: 300px; }.item { flex: 1; }Using fixed widths on flex items instead of the flex shorthand, which breaks responsiveness. Let flex distribute space.
Reach for flex: 1 to share space equally, flex-wrap: wrap for responsive rows, and gap (never margins) for spacing. This trio handles most one-dimensional layouts.
Build a toolbar where a title sits on the left and two buttons on the right (justify-content: space-between), then make a wrapping row of five equal-width cards using flex: 1 and flex-wrap.
1. What sets the main axis to vertical?
2. What does flex: 1 do?
3. Which lets items flow onto new lines?
4. Which overrides alignment for one item?
- Flexbox has a main axis (flex-direction) and a cross axis.
- justify-content aligns on the main axis; align-items on the cross.
- flex: 1 shares space equally; flex-wrap enables responsive rows.
- align-self overrides alignment for one item.