CSS Flexbox

Flex wrap

The flex-wrap property is used to specify whether flexible elements are allowed to wrap to multiple lines or should be forced to stay on one line.

nowrap is the default value and forces the flexible elements to be laid out in a single line and may cause overflow.

wrap allows the elements to break into multiple lines.

If we leave the default nowrap, flex elements will shrink as much as necessary/possible in order to not create overflow. The amount of shrinking can be controlled with flex-shrink.

Copy
wrap

<div class="wrapper">
  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>

  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>

  <div class="box red"></div>
  <div class="box green"></div>
  <div class="box blue"></div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
}

.box {
  width: 100px;
  height: 100px;
}

.red {
  background-color: #d32f2f;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}