CSSレイアウトの決定版！Flexboxで「横並び」を自在に操る

CSSでレイアウトを組むとき、特に「要素を横並びにする」のに苦労した経験はありませんか？

かつてのCSSレイアウトは、floatプロパティなどを使って要素を横並びにするのが一般的でしたが、これらは本来レイアウトのために設計されたものではありませんでした。そのため、しばしば複雑で予期せぬ挙動（例：親要素の高さがなくなる）を引き起こす「ハック」的な手法に頼る必要がありました。

こうした問題をすべて解決するために登場したのが、Flexbox（Flexible Box Layout Module）です。Flexboxは、要素を一行（または一列）に並べ、スペースの分配や配置を非常に柔軟に行うために設計された、現代の標準的なレイアウト手法です。

🚀 Flexboxの基本概念：親（コンテナ）と子（アイテム）

Flexboxを機能させるには、二種類の要素が必要です。

Flexコンテナ (Flex Container): レイアウトを適用したい要素たちの「親要素」。
Flexアイテム (Flex Items): Flexコンテナの「直接の子要素」。

Flexboxを有効にする方法は驚くほど簡単です。親要素であるコンテナに、たった一行 `display: flex;` を指定するだけです。

↓親要素に display: flex; を適用した結果

Item 1

Item 2

Item 3

この一行を追加するだけで、子要素（Flexアイテム）はすべてFlexboxのレイアウト規則に従うようになり、デフォルトで**横一列に並びます**。floatを使ったときのような回り込み解除（clearfix）も不要です。

🧭 2つの軸：主軸 (Main Axis) と交差軸 (Cross Axis)

Flexboxを理解する上で最も重要な概念が、この「2つの軸」です。

Flexboxのレイアウト基準

主軸 (Main Axis): Flexアイテムが並ぶ「方向」の軸。デフォルトでは水平（左から右）です。
交差軸 (Cross Axis): 主軸に対して「垂直」な方向の軸。デフォルトでは垂直（上から下）です。

「なぜこれが重要か？」というと、flex-directionプロパティで、この主軸の方向自体を「垂直（上から下）」に変更することもできるからです。

🔧 親コンテナに指定する「制御プロパティ」

Flexboxの強力な点は、親であるコンテナにプロパティを指定するだけで、中のアイテム群全体の配置をコントロールできることです。

flex-direction

主軸の方向（アイテムが並ぶ向き）を定義します。

row (初期値): アイテムを左から右へ水平に並べます。
column: アイテムを上から下へ垂直に並べます。
row-reverse: アイテムを右から左へ水平に並べます。
column-reverse: アイテムを下から上へ垂直に並べます。

justify-content

主軸方向（デフォルトでは水平方向）のアイテムの配置方法を定義します。「中央揃え」や「均等配置」など、使用頻度が非常に高いです。

flex-start (初期値): 始点に寄せます（左揃え）。
flex-end: 終点に寄せます（右揃え）。
center: 中央に配置します。
space-between: 最初のアイテムを始点、最後のアイテムを終点に配置し、残りを均等な間隔で配置します。
space-around: 全てのアイテムの「周り」に均等な間隔を設けます。

align-items

交差軸方向（デフォルトでは垂直方向）のアイテムの配置方法を定義します。高さがバラバラなアイテムを揃えたい時などに使います。

stretch (初期値): アイテムをコンテナの高さ（または幅）いっぱいに引き伸ばします。
flex-start: 始点に寄せます（上揃え）。
flex-end: 終点に寄せます（下揃え）。
center: 中央に配置します（垂直方向の中央揃え）。

flex-wrap

コンテナの幅にアイテムが収まらない場合に、折り返しを許可するかどうかを定義します。レスポンシブデザインで必須です。

nowrap (初期値): 折り返さず、一行に無理やり収めようとします。
wrap: 収まらないアイテムを下の行に折り返します。

gap

アイテムとアイテムの間の「隙間」を簡単に設定できる便利なプロパティです。marginを使わずに均等な間隔を作れます。

.container {
  display: flex;
  gap: 20px; /* アイテム間に20pxの隙間を設ける */
}

🛠️ 実践例：ブログの記事カードレイアウト

Flexboxを使えば、ブログでよく見かけるレスポンシブなカード型レイアウトもたった数行で作成できます。

HTML:

<div class="card-container">
  <article class="card">...カード1...</article>
  <article class="card">...カード2...</article>
  <article class="card">...カード3...</article>
  <article class="card">...カード4...</article>
</div>

CSS:

.card-container {
  display: flex;         /* 1. Flexboxを有効化 (横に並ぶ) */
  flex-wrap: wrap;       /* 2. 画面幅に応じてカードを折り返す */
  gap: 16px;             /* 3. カード間に16pxの隙間を設ける */
}

.card {
  /* 4. calc()を使って隙間を考慮した幅を計算 */
  /* (3列表示の場合: 100% / 3) - (隙間の調整) */
  width: calc(33.333% - 11px); 
  
  border: 1px solid #ccc;
  padding: 16px;
}

このコードだけで、PCでは横に並び、画面幅が狭くなると自動的に折り返して縦に並ぶ、柔軟なレイアウトが実現できます。

月影

日々の雑感

CSS Flexboxの使い方解説：justify-contentとalign-items