<h1>flex-wrap: nowrap</h1>
<div class="flex-container nowrap">
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
</div>

<h1>flex-wrap: wrap</h1>
<div class="flex-container wrap">
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
  <div class="flex-item">item</div>
</div>

.flex-container {
  display: flex;
  width: 300px;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #ccc;
}

.flex-item {
  width: 100px;
  margin: 10px;
  padding: 10px;
  background-color: yellow;
}

.nowrap {
  flex-wrap: nowrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

h1 {
  margin-bottom: 0;
  font-size: 16px;
}