nowrap, wrap and wrap-reverse
nowrap squeezes all five onto one line (300px into 200px, so each loses 20px). wrap keeps 60px and moves items 4 and 5 to a second line. wrap-reverse puts the first line at the bottom.
flex-wrap: wrap lets items break onto new lines instead of shrinking, gap puts fixed space between items and lines without touching the outer edges, and order changes only the visual position of an item, never its reading or Tab order.
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 list of tags (<span class="tag">) wrap onto new lines with 8px between tags and 6px between lines.
Write CSS for a row of items that wraps, with 16px gaps, where each item is at least 200px and grows to fill the line.
A product card has <img> then <h2> in the HTML. Show the heading above the image visually. Is order a good idea here?
Explain it without notes
What is the difference between flex-wrap: nowrap and wrap when items don't fit?
Why is gap better than margins for spacing flex items?
What does order change, and what doesn't it change?
How can you make a responsive row of cards with Flexbox and no media queries, and what is its weakness?
Preview
Console
Nothing logged yet.Expected console output
nowrap: widths 40,40,40,40,40 | tops 0,0,0,0,0
wrap: widths 60,60,60,60,60 | tops 0,0,0,30,30
wrap-reverse: widths 60,60,60,60,60 | tops 30,30,30,0,0