Flexbox Layout

All in one: every Flexbox property and value, side by side

What this example compares

Where it goes: no display: flex vs on the parent vs on each child (the mistake)
The two axes: flex-direction: row vs column vs row-reverse vs column-reverse
Main-axis spacing: justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly
The axes turn: justify-content: center in a row vs in a column vs align-items: center in a column
Cross-axis alignment: align-items: stretch, flex-start, center, flex-end, baseline
Centring: one property vs both vs text-align, margin: auto and the value that does not exist, float: center
Space between: gap vs margin-right vs the old last-item fix vs gap: 12px 20px
Wrapping: flex-wrap: nowrap (squash) vs wrap (new line)
The flex shorthand on items: none vs flex: 1 vs flex: 2 vs flex: 0 0 140px vs flex-grow / flex-shrink / flex-basis vs flex: 1 1 180px
Project step 9: Asha Kumar's nav bar (space-between) and the wrapping course row (flex: 1 1 200px)

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see ten panels (scroll inside the result to reach them all). In panel 1 only the middle card puts 1, 2, 3 in a row; the other two stack them. Panel 2 shows 1 2 3 left to right, top to bottom, 3 2 1 at the right edge, and 3 on top of 2 on top of 1. Panel 3 shows the same three boxes bunched left, middle and right, then spread three ways. In panel 4 the same justify-content: center centres the boxes left-right in the first card and up-down in the second. In panel 5 the boxes fill the height, sit at the top, the middle and the bottom, and in the last card the numbers stand level. In panel 6 only the third white box is in the dead centre, and the last one has not moved at all. In panel 7 box 3 touches the right edge in the first card but not in the second. In panel 8 the four course codes spill out of the first box but take two lines in the second. Panel 9 shows the boxes as wide as their text, in equal thirds, with Two twice the share, a fixed sidebar (twice), and two course cards with the third wrapping below. Panel 10 is Asha Kumar's nav bar above three equal course cards. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 4, the second card uses justify-content: center, yet the boxes are centred up-down, not left-right. Why?

Because it also has flex-direction: column, which makes the main axis vertical, and justify-content always works along the main axis. The property did not change; the axis turned. To centre them left-right in that column you would use align-items: center, as in the third card.