Command Palette

Search for a command to run...

Hectal
Phase 7Intermediate8 of 12 in CSS

Flexbox

Lay out boxes in a row or a column with Flexbox: axes, alignment, how flex-grow, flex-shrink and flex-basis share space, wrapping, gaps and real patterns.

In Phase 6 you placed boxes with normal flow, position and floats. Those tools were never designed for laying out a row of buttons or a set of equal-height cards, and people fought them for years. Flexbox (the Flexible Box Layout module) was built for exactly that job: arranging items in one direction at a time, a row or a column, and sharing out the space between them.

You'll start with the two ideas everything else depends on: the flex container and its two axes (main and cross). Then you'll align items along both axes, learn the exact maths the browser uses to grow and shrink items (flex-grow, flex-shrink, flex-basis and the flex shorthand), and meet the most common Flexbox bug of all: a long word or a wide child that refuses to shrink, fixed with min-width: 0.

The phase ends with wrapping, gap, order and the five patterns you will build again and again: a navbar, a media object, a row of cards, a sticky footer and the holy grail layout. Most examples print real measured positions, so you can change a value and check the browser's maths. Phase 8 (CSS Grid) handles layouts in two directions at once, and Topic 8.6 shows when to pick Grid over Flexbox.

0/5 · 0%
5 topics ~2 h 21 code blocks & diagrams
Start with the first topic
1
7.1

The Flex Container and Axes

display: flex turns an element into a flex container and its direct children into flex items, laid out along a main axis set by flex-direction; the cross axis runs at right angles to it, and every other Flexbox property is defined in terms of these two axes.

27 min 1 diagram 3 code practice

2
7.2

Aligning with Flexbox

justify-content shares out leftover space along the main axis, align-items places every item on the cross axis (with align-self to override one item), and align-content spaces out whole lines when items wrap; auto margins push items apart by eating free space.

29 min 4 code practice

3
7.3

flex-grow, flex-shrink and flex-basis

Each flex item starts from its flex-basis; leftover space is shared out in proportion to flex-grow, and missing space is taken back in proportion to flex-shrink times the basis, never below the item's minimum size, which by default is its content width, hence the min-width: 0 fix.

31 min 4 code practice

4
7.4

Wrapping and Gaps

flex-wrap: wrap lets items break onto new lines instead of shrinking, gap puts fixed space between items and lines without touching the outer edges, and order changes only the visual position of an item, never its reading or Tab order.

27 min 4 code practice

5
7.5

Flexbox Patterns

Five layouts cover most of what Flexbox is used for: a navbar (auto margin), a media object (fixed image plus flex: 1; min-width: 0 text), a row of equal-height cards with buttons pinned to the bottom, a sticky footer (column + flex: 1 main) and the holy grail page layout.

29 min 5 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Three boxes in a row

The three coloured boxes are stacked on top of each other. Using only the CSS tab, put them side by side in a row with Flexbox.

Beginner
2

Centre a badge

Centre the .badge horizontally and vertically inside the .stage box using Flexbox.

Beginner
3

A navbar with a split

Lay out the navbar: the logo on the left, the links on the right, all items vertically centred in the 56px bar.

Intermediate
4

A sidebar that doesn't break

Make a two-column layout: .side is 80px wide and never shrinks, .main takes all the remaining width of .layout, with a 12px gap.

Intermediate
5

Pricing cards with aligned buttons

Lay out the three plans in one row with a 12px gap, each card the same width.

Intermediate
6

A page with a sticky footer

This page has very little content, so the footer floats up under it. Make the footer sit at the very bottom of the window when the content is short.

Advanced