The four flex-direction values
Item A (orange) is always first in the HTML. row-reverse puts it at the right end (x = 180 - 50), column-reverse at the bottom (y = 90 - 30), because the main-start edge moved. The inline style attributes are only there so each box shows its own value.
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
row -> A at (0,0)
row-reverse -> A at (130,0)
column -> A at (0,0)
column-reverse -> A at (0,60)