justify-content: where the free space goes
Each line prints the x position of the three items. Free space is 240 - 3 x 40 = 120px. Compare space-around (20px at the ends, 40px between) with space-evenly (30px everywhere).
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
flex-start: 0, 40, 80
flex-end: 120, 160, 200
center: 60, 100, 140
space-between: 0, 100, 200
space-around: 20, 100, 180
space-evenly: 30, 100, 170