gap, row-gap and column-gap
With gap: 10px, three items and two gaps fill exactly 200px, and line 2 starts at 30 + 10 = 40. With gap: 20px 5px, the first value is the row gap (between lines) and the second the column gap (between items).
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
same: x 0,70,140 | item 4 top 40 | row-gap 10px
split: x 0,65,130 | item 4 top 50 | row-gap 20px