<h3>flex 사용 X</h3>
<div class="container">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>1. nowrap</h3>
<div class="container one">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>2. wrap</h3>
<div class="container two">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>3. wrap-reverse</h3>
<div class="container three">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>
.container {
  width: 200px;
  padding: 10px;
  background: seagreen;
}
.container.one {
  display: flex;
  flex-wrap: nowrap;
}
.container.two {
  display: flex;
  flex-wrap: wrap;
}
.container.three {
  display: flex;
  flex-wrap: wrap-reverse;
}
.box {
  width: 100px;
  height: 50px;
}
.box.one {
  background: salmon;
}
.box.two {
  background: skyblue;
}
.box.three {
  background: yellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.