Auto margins and align-self in a navbar
The auto margin on Blog takes the 110px of free space, so Blog and Shop sit at the right end. Logo (30px tall) and Blog (20px) are centred; Shop uses align-self: flex-end and sits at the bottom (60 - 20 = 40).
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
Logo: x=0 y=15
Blog: x=160 y=20
Shop: x=200 y=40