Media object
The image keeps 48 x 48 even though the text is long; the text column gets 260 - 48 - 12 = 200px. Change align-items to the default stretch: an <img> stretched down would distort, which is why the pattern pins it to the top.
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
image: 48 x 48
text column: 200
image is taller than the text: false