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

<hr>

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

<hr>

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

<hr>

<h3>「flex-direction:column-reverse;」を使用した例</h3>
<div class="column-reverse">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.row {
  display:flex;
  flex-direction:row;
}
.row-reverse{
  display:flex;
  flex-direction:row-reverse;
}

.column {
  display:flex;
  flex-direction:column;
}

.column-reverse {
  display:flex;
  flex-direction:column-reverse;
}

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

.row-reverse .item {
  background-color: blue;
}

.column .item {
  background-color: green;
}

.column-reverse .item {
  background-color: purple;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.