flex-directionの使い方：row・columnの違いとレイアウトの基本

CSSのflex-directionプロパティは、Flexboxレイアウトにおける「要素の並び方向」を決定するプロパティです。
この記事では、row・row-reverse・column・column-reverse の4種類の値を使った実例を紹介し、
横並びと縦並びの違いを視覚的に理解できるようにします。

1 実装のポイント

Flexboxを使う際、まずは親要素に display: flex; を指定します。
そのうえで flex-direction によって要素の並ぶ方向を決めます。

<div class="flex-container row">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="flex-container column">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
    

2 汎用CSS

以下のCSSでは、flex-direction の4つの値（row／row-reverse／column／column-reverse）を
それぞれ確認できるように設定しています。
各行にコメント（/**/）でわかりやすく説明しています。

/* ----------------------------------
 * flex-directionのデモ用CSS
 * --------------------------------- */

.flex-container { /** Flexboxの親要素 **/
  display: flex; /** Flexboxレイアウトを有効化 **/
  justify-content: center; /** 横方向の中央揃え **/
  align-items: center; /** 縦方向の中央揃え **/
  background: #f5f5f5; /** 背景を淡いグレーに **/
  border-radius: 10px; /** 角を少し丸く **/
  margin: 30px auto; /** 外側の余白（上下30px） **/
  padding: 20px; /** 内側余白 **/
  max-width: 600px; /** 最大幅を設定 **/
  height: 200px; /** 固定高さで見やすく **/
  gap: 10px; /** 各要素の間に10pxの隙間 **/
}

.flex-container .item { /** 子要素の共通スタイル **/
  background: #0073aa; /** WordPressブルー **/
  color: #fff; /** テキスト色を白に **/
  font-weight: bold; /** 太字 **/
  width: 80px; /** 幅を固定 **/
  height: 80px; /** 高さを固定 **/
  display: flex; /** 子要素内の中央揃え **/
  justify-content: center; /** 水平方向中央 **/
  align-items: center; /** 垂直方向中央 **/
  border-radius: 8px; /** 角を丸く **/
}

/** 横方向（左→右） **/
.flex-container.row {
  flex-direction: row; /** デフォルト：左から右に並ぶ **/
}

/** 横方向（右→左） **/
.flex-container.row-reverse {
  flex-direction: row-reverse; /** 右から左へ並ぶ **/
}

/** 縦方向（上→下） **/
.flex-container.column {
  flex-direction: column; /** 上から下に並ぶ **/
}

/** 縦方向（下→上） **/
.flex-container.column-reverse {
  flex-direction: column-reverse; /** 下から上に並ぶ **/
}