CSS — Flexbox

Layout's modern workhorse

Flexbox lays out children along one axis — a row or a column — with alignment and spacing built in:

.row {
    display: flex;
    gap: 16px;                 /* space between items, finally */
}

<div class="row">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

What the browser displays

(Three boxes side by side with 16px gaps — no floats, no inline-block hacks.)

Two roles exist: the flex container (parent) sets the rules; flex items (children) follow.

Direction

.row     { flex-direction: row; }      /* default: left→right */
.column  { flex-direction: column; }   /* top→bottom          */
.reverse { flex-direction: row-reverse; }

Everything else (justify, align) follows this chosen axis.

Main axis alignment: justify-content

Distributes items along the flow direction:

Value	Effect
flex-start	Packed left (default)
center	Packed center
flex-end	Packed right
space-between	First/last at edges, even gaps between
space-around	Half-size space on outer edges
space-evenly	Identical gaps everywhere

.nav {
    display: flex;
    justify-content: space-between;   /* logo left, links right */
}

Cross-axis alignment: align-items

Perpendicular alignment within the row:

.toolbar {
    display: flex;
    align-items: center;   /* vertical centering in one line! */
}

Values: stretch (default), center, flex-start, flex-end, baseline.

Vertical centering used to require hacks; now it's two properties:

.hero {
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical   */
    height: 100vh;
}

Growing and shrinking: flex on items

.sidebar { flex: 0 0 240px; }   /* fixed 240px width            */
.content { flex: 1; }           /* absorb ALL remaining width   */

flex: 1 is the magic "fill whatever's left":

.layout { display: flex; min-height: 100vh; }

Wrapping

.cards {
    display: flex;
    flex-wrap: wrap;          /* overflow to next line */
}
.card { flex: 1 1 250px; }    /* ideal 250px basis, can grow/shrink */

Items keep ~250px minimum and wrap into rows — responsive grids without media queries.

Quick reference card

.container {
    display: flex;
    flex-direction: row | column;
    justify-content: start | center | end | space-between;
    align-items: stretch | center | start | end;
    gap: 16px;
    flex-wrap: nowrap | wrap;
}
.item {
    flex: 1;              /* grow to fill       */
    flex: 0 0 200px;      /* lock at 200px      */
}

Mini Practice

1. Build a header: logo left, three nav links right (space-between)
2. Center anything perfectly inside a 100vh hero
3. Sidebar + content layout with flex: 0 0 240px and flex: 1
4. Card row that wraps using flex-wrap + flex-basis; resize and watch it reflow
5. Swap to flex-direction: column on mobile widths via one media query

Next: grid →