<h3>「flex-wrap:nowrap;」を使用した例</h3>
<div class="nowrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<hr>
<h3>「flex-wrap:wrap;」を使用した例</h3>
<div class="wrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<hr>
<h3>「flex-wrap:wrap-reverse;」を使用した例</h3>
<div class="wrap-reverse">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.nowrap {
  display:flex;
  flex-wrap:nowrap
}
.over {
  width: 50px;
}

.wrap {
  display:flex;
  flex-wrap:wrap;
  width: 150px;
}

.wrap-reverse {
  display:flex;
  flex-wrap:wrap-reverse;
  width: 150px;
}

.item {
  background-color: red;
  color:#fff;
  margin: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.wrap .item {
  background-color: blue;
}

.wrap-reverse .item {
  background-color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.