Sticky footer
The page content is short, but main grows to fill the spare height, so the footer sits at the bottom of the window. Add many paragraphs to main: the page becomes taller than the window and the footer follows the content.
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.Expected console output
footer touches the bottom of the window: true
main grew taller than its text: true