Holy grail layout
In a narrow preview the three middle parts stack; widen it past 400px and they become three columns. Grid with named areas (Topic 8.4) describes the same page in fewer lines.
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.
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.
Build a notification row: a 32px icon, a message that takes the remaining space, and a "Dismiss" button at the far right, all centred vertically.
Make a page whose footer sits at the bottom of the window when the content is short.
Make three pricing cards equal height with their "Buy" buttons lined up at the bottom.
Explain it without notes
How do you build a navbar with a logo on the left and links on the right using Flexbox?
What makes a media object robust when the text is very long?
How do you make cards in a row equal height with their buttons aligned at the bottom?
Explain how a Flexbox sticky footer works, and why min-height matters.
Preview
Console
Nothing logged yet.