What changes for the children
The <span> is blockified (display: block). Items without a height stretch to the container's 100px; the one with height: 60px keeps it. The loose text becomes an anonymous flex item: you can see it laid out, but it isn't an element, so children doesn't list it and you can't style it with a selector.
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
span display: block
span height: 100
auto height: 100
fixed height: 60
child elements: 3 | child nodes: 7