Equal-height cards with buttons at the bottom
The middle card has much more text, yet all three cards are the same height (the row's align-items: stretch) and the buttons line up (margin-top: auto inside each column). Delete margin-top: auto and run again: the buttons follow their text.
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
equal heights: true
buttons line up: true
equal widths: true