align-itemsの使い方とjustify-contentとの違いを理解する

Flexboxレイアウトでは、要素を縦・横の方向に整列させるためのプロパティがいくつかあります。
その中でも「align-items」は、**縦方向（交差軸）**の配置を制御するための重要なプロパティです。
一方、「justify-content」は**横方向（メイン軸）**の配置を制御します。
本記事では、align-itemsの動作と、justify-contentとの違いを図解でわかりやすく解説します。

1 実装のポイント

Flexboxを使うと、要素を簡単に縦横中央に揃えることができます。
以下のような構造を使うことで、親要素に指定したalign-itemsが子要素の縦方向の位置を制御します。

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

2 汎用CSS

次に、align-itemsとjustify-contentの違いを実感できるよう、
FlexboxのCSSを以下のように設定してみましょう。

/* -----------------------------------------------------
 * align-itemsの使い方とjustify-contentとの違い
 * ----------------------------------------------------- */

.flex-box2 { /* 親コンテナ（Flexbox全体） */
  display: flex; /* Flexboxレイアウトを有効にする */
  justify-content: center; /* 子要素を水平方向（横）に中央寄せ */
  align-items: center; /* 子要素を垂直方向（縦）に中央寄せ */
  height: 300px; /* 高さを指定して縦方向の効果を確認 */
  background: #e8f0ff; /* 背景を淡い青で表示 */
  border-radius: 10px; /* 角を少し丸くする */
}

.flex-box2 .item { /* 各子要素（ボックス） */
  background: #0073aa; /* WordPressカラーの青 */
  color: #fff; /* 文字色を白に */
  font-weight: bold; /* 太字 */
  text-align: center; /* テキストを中央に配置 */
  padding: 20px; /* 内側余白 */
  width: 80px; /* 固定幅 */
  border-radius: 5px; /* 角を丸く */
  margin: 5px; /* 各ボックス間の隙間 */
}
    

3 justify-contentとの違い

align-items は縦（cross-axis）方向、
justify-content は横（main-axis）方向の整列を行う点が大きな違いです。

たとえば、以下のように指定すると、それぞれの働きが明確になります。

.flex-box2 {
  display: flex; /* Flexbox化 */
  justify-content: space-between; /* 横方向に均等配置 */
  align-items: flex-start; /* 縦方向に上揃え */
}
    

このように、align-itemsは上下の揃え方、
justify-contentは左右の揃え方を制御するプロパティです。

4 完成イメージ

5 まとめ

- align-items → 縦方向（交差軸）の整列
- justify-content → 横方向（メイン軸）の整列
Flexboxを理解する上では、この「軸の違い」を意識することが重要です。
デザインレイアウトの制御に慣れると、レスポンシブでも柔軟な配置ができるようになります。