align-items: stretch only works on auto sizes
The blue items have fixed heights, so stretch leaves them at the top. The pink item has no height: it stretches to 100px with stretch and collapses to 0 (its empty content) with the other values. The body is a flex container too, which puts the four demos side by side.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A footer row holds a copyright <p> and a <ul> of links. Put the copyright on the left and the links on the right, vertically centred.
Centre one .dialog box horizontally and vertically in a .overlay that fills the screen.
A .price row shows <span class="amount">₹499</span><span class="per">/month</span> in two font sizes. Line up the text so both parts sit on the same line.
Explain it without notes
What is free space in Flexbox, and which properties use it?
Explain the difference between space-between, space-around and space-evenly.
Why might align-items: stretch not make an item fill its container?
When does align-content have an effect?
How do you push one item to the far end of a flex row, and why does it work?
Preview
Console
Nothing logged yet.Expected console output
stretch: tops 0,0,0 | pink height 100
flex-start: tops 0,0,0 | pink height 0
center: tops 40,30,20 | pink height 0
flex-end: tops 80,60,40 | pink height 0