The same children, before and after display: flex
Each pair is (x, y) of an item inside its container, in px. In normal flow the blocks stack (y grows by 30). In the flex container they sit side by side on the main axis (x grows by 50). Only the parent changed.
display: flex turns an element into a flex container and its direct children into flex items, laid out along a main axis set by flex-direction; the cross axis runs at right angles to it, and every other Flexbox property is defined in terms of these two axes.
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.
Make a <nav> lay out its three <a> links in a row.
Make a .stack element place its children in a column from top to bottom, using Flexbox.
A <div class="tag"> holds an icon <span> and some text. Make it sit inside a sentence, only as wide as its content, with the icon and text side by side.
Explain it without notes
What is the difference between a flex container and a flex item?
Explain the main axis and the cross axis, and how flex-direction changes them.
What happens to a child element when it becomes a flex item?
What is the difference between display: flex and display: inline-flex?
Why can flex-direction: row-reverse be an accessibility problem?
Preview
Console
Nothing logged yet.Expected console output
block: (0,0) (0,30) (0,60)
flex: (0,0) (50,0) (100,0)