meet it

lets a full row spill onto a new line.

A flex row never breaks by itself. On a narrow phone, the children squeeze and squash to stay on one line, even when that makes them hard to read.

flex-wrap: wrap fixes that. When the next child does not fit, it moves down and starts a new line, like words in a paragraph.

Now gap can take two values: the between lines first, then the between neighbours. gap: 12px 8px means 12px between lines and 8px across.

<div class="tags">
  <span class="tag">Cats</span>
  <span class="tag">Dogs</span>
  <span class="tag">Rabbits</span>
  <span class="tag">Hamsters</span>
  <span class="tag">Parrots</span>
  <span class="tag">Goldfish</span>
</div>

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
}
.tag {
  width: 120px;
  padding: 8px;
  background-color: lavender;
}

Press show my page to see it here.

On a narrow screen the tags wrap. Remove flex-wrap: wrap; and they squeeze onto one line instead.

guess first

Six very wide boxes and no `flex-wrap`. What happens?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="row">
  <div class="day">Mon</div>
  <div class="day">Tue</div>
  <div class="day">Wed</div>
  <div class="day">Thu</div>
  <div class="day">Fri</div>
  <div class="day">Sat</div>
</div>

.row {
  display: flex;
  gap: 8px;
}
.day {
  width: 400px;
  background-color: peachpuff;
}

your turn

Your turn. Wrap the photo row.

Let the photos wrap onto new lines, with 16px between the lines and 8px between neighbours.

the page you’re styling

<div class="photos">
  <img src="cat.svg" alt="A cat">
  <img src="dog.svg" alt="A dog">
  <img src="tree.svg" alt="A tree">
  <img src="cake.svg" alt="A cake">
</div>

your css

Your code

Press show my page to see it here.

the photos wrap onto new linesnot checked yet
there is 16px between the linesnot checked yet
neighbours sit 8px apartnot checked yet

fix it

The tags still squeeze onto one line. Fix it!

the page you’re styling

<div class="tags">
  <span class="tag">Pizza</span>
  <span class="tag">Burgers</span>
  <span class="tag">Noodles</span>
  <span class="tag">Salads</span>
  <span class="tag">Desserts</span>
</div>

your css

Broken code to fix

Press show my page to see it here.

the tags can wrap onto new linesnot checked yet

Which element holds the tags in a flex row?
Like gap, flex-wrap belongs on the flex parent, not on the children.
Move flex-wrap: wrap; into the .tags rule, then press run.

nailed it

your rows know when to start a new line. :D

flex-wrap: wrap moves children to a new line when the row is full.
Without it, flex children squeeze to stay on one line.
gap: 16px 8px sets the row-gap, then the column-gap.

new words in your collection

flex-wrap
row-gap
column-gap

This lesson isn’t saved. A free account remembers every lesson you finish.

flex-wrap: wrap lets a full row spill onto a new line.

Six very wide boxes and no flex-wrap. What happens?

Your turn. Wrap the photo row.

The tags still squeeze onto one line. Fix it!

your rows know when to start a new line. :D

lets a full row spill onto a new line.

Six very wide boxes and no `flex-wrap`. What happens?