【初心者向け】Flexbox（フレックスボックス）完全ガイド

はじめに

フレックスボックス（Flexbox）は、要素を柔軟に配置できるCSSの強力なレイアウトシステムです。

この記事では、各プロパティがどのような動作をするのか、視覚的に理解できるよう解説します。

フレックスボックスを使えば、今まで複雑だったレイアウトが驚くほど簡単に実現できるようになりますので、ぜひ参考にしてみてください。

フレックスボックスの基本構造

フレックスボックスを使うには、まず親要素にdisplay: flexを設定します。この親要素を「フレックスコンテナ」、その子要素を「フレックスアイテム」と呼びます。

See the Pen フレックスベース by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ベースとなるHTML構造

すべてのデモで使用する基本的なHTML構造です：

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

ベースとなるCSS

視覚的にわかりやすくするための基本スタイル：

.container {
  display: flex;
  width: 600px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
  margin: 20px auto;
}

.item {
  width: 100px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.item-1 { background-color: #ff6b6b; }
.item-2 { background-color: #4ecdc4; }
.item-3 { background-color: #45b7d1; }

このコードをベースに、各プロパティを変更して動作を確認していきます。

flex-direction：並ぶ方向を決める

flex-directionは、フレックスアイテムが並ぶ方向を指定するプロパティです。

横並び、縦並び、そしてそれぞれの逆順を設定できます。

row（初期値）：横並び

.container {
  display: flex;
  flex-direction: row;
}

アイテムが左から右へ横一列に並びます。

これがフレックスボックスのデフォルトの動作です。

flex-direction: row;は初期状態です。

row-reverse：横並びの逆順

.container {
  display: flex;
  flex-direction: row-reverse;
}

アイテムが右から左へ逆順で並びます。「3、2、1」の順番で右端から配置されます。

column：縦並び

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

アイテムが上から下へ縦一列に並びます。コンテナの高さを増やすと、配置がよりわかりやすくなります。

column-reverse：縦並びの逆順

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

アイテムが下から上へ逆順で並びます。「3、2、1」の順番で下端から配置されます。

justify-content：主軸方向の配置

justify-contentは、フレックスアイテムを主軸（メイン軸）方向にどう配置するかを決めます。主軸はflex-directionで決まる方向です。

flex-start（初期値）：先頭に寄せる

.container {
  display: flex;
  justify-content: flex-start;
}

アイテムが主軸の開始位置（左端）に詰めて配置されます。

flex-end：末尾に寄せる

.container {
  display: flex;
  justify-content: flex-end;
}

アイテムが主軸の終了位置（右端）に詰めて配置されます。右寄せのレイアウトが簡単に実現できます。

center：中央に寄せる

.container {
  display: flex;
  justify-content: center;
}

アイテムが主軸の中央に配置されます。要素の水平中央配置が1行で実現できます。

space-between：両端配置で均等間隔

.container {
  display: flex;
  justify-content: space-between;
}

最初のアイテムは先頭、最後のアイテムは末尾に配置され、残りのスペースが均等に分配されます。

space-around：各アイテムの両側に均等な余白

.container {
  display: flex;
  justify-content: space-around;
}

各アイテムの両側に同じ幅の余白が生まれます。端のアイテムの外側の余白は、アイテム間の余白の半分になります。

space-evenly：完全に均等な間隔

.container {
  display: flex;
  justify-content: space-evenly;
}

すべての間隔（端も含む）が完全に均等になります。最も均整の取れた配置を実現できます。

align-items：交差軸方向の配置

align-itemsは、フレックスアイテムを交差軸方向にどう配置するかを決めます。交差軸は主軸と垂直な方向です。

stretch（初期値）：高さいっぱいに伸ばす

.container {
  display: flex;
  align-items: stretch;
}

.item {
  width: 100px;
  /* heightを指定しない */
}

アイテムの高さを指定しない場合、コンテナの高さいっぱいに伸びます。

flex-start：上端に揃える

.container {
  display: flex;
  align-items: flex-start;
}

アイテムが交差軸の開始位置（上端）に揃えて配置されます。

flex-end：下端に揃える

.container {
  display: flex;
  align-items: flex-end;
}

アイテムが交差軸の終了位置（下端）に揃えて配置されます。フッター要素の配置などに便利です。

center：中央に揃える

.container {
  display: flex;
  align-items: center;
}

アイテムが交差軸の中央に配置されます。垂直中央配置が簡単に実現できます。

baseline：ベースラインに揃える

.container {
  display: flex;
  align-items: baseline;
}

.item-1 { 
  height: 80px; 
  font-size: 24px;
  padding-top: 10px;
}
.item-2 { 
  height: 120px; 
  font-size: 36px;
  padding-top: 20px;
}
.item-3 { 
  height: 60px; 
  font-size: 18px;
  padding-top: 5px;
}

アイテム内のテキストのベースラインが揃います。異なる高さやフォントサイズでも、テキストの基準線が一直線になります。

flex-wrap：折り返しの制御

flex-wrapは、アイテムが一行に収まらない場合の折り返し動作を制御します。

nowrap（初期値）：折り返さない

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 200px;
}

コンテナの幅が狭くても、アイテムは一行に並び続けます。はみ出す場合があります。

wrap：折り返す

.container {
  display: flex;
  flex-wrap: wrap;
}

アイテムがコンテナの幅を超える場合、次の行に折り返されます。レスポンシブなレイアウトに最適です。

wrap-reverse：逆方向に折り返す

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

折り返しが下から上に向かって行われます。新しい行が上に追加されていきます。

align-content：複数行の配置

align-contentは、複数行になったフレックスアイテムの行全体をどう配置するかを決めます。flex-wrap: wrapと併用します。

stretch（初期値）：高さいっぱいに伸ばす

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  width: 400px;
}

.item {
  width: 150px;
  height: 80px;
}

各行が利用可能な高さを均等に分けて使用します。

flex-start：上端に寄せる

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

すべての行が上端に詰めて配置されます。

flex-end：下端に寄せる

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

すべての行が下端に詰めて配置されます。

center：中央に寄せる

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

すべての行がコンテナの中央に配置されます。

space-between：両端配置で均等間隔

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

最初の行は上端、最後の行は下端に配置され、残りのスペースが均等に分配されます。

space-around：各行の両側に均等な余白

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

各行の上下に同じ高さの余白が生まれます。

gap：アイテム間の間隔

gapプロパティは、フレックスアイテム間に一定の間隔を設定します。marginを使わずに、簡単に間隔を制御できます。

gap：均等な間隔

.container {
  display: flex;
  gap: 20px;
}

すべてのアイテム間に20pxの間隔が設定されます。

row-gap：行間の間隔

.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  width: 200px;
  height: 400px;
}

.item {
  width: 100px;
  /* heightを指定しない */
}

行と行の間にのみ30pxの間隔が設定されます。

column-gap：列間の間隔

.container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  width: 400px;
}

列と列の間にのみ40pxの間隔が設定されます。横並びのアイテム間にだけ適用されます。

flex-grow：余白を埋める伸縮

flex-growは、コンテナに余白がある場合、アイテムがどれだけ伸びるかを指定します。

flex-grow: 0（初期値）：伸びない

.container {
  display: flex;
  width: 600px;
}

.item {
  width: 100px;
  height: 80px;
  flex-grow: 0;
}

アイテムは元のサイズを維持し、余白があってもそのままです。

flex-grow: 1：均等に伸びる

.item {
  flex-grow: 1;
}

すべてのアイテムが余白を均等に分けて伸びます。コンテナの幅いっぱいに広がります。

異なるflex-grow値：比率で伸びる

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }
.item-3 { flex-grow: 1; }

item-2は他の2倍の割合で余白を取得します。1:2:1の比率で伸びます。

flex-shrink：はみ出し時の縮小

flex-shrinkは、コンテナに収まらない場合、アイテムがどれだけ縮むかを指定します。

flex-shrink: 1（初期値）：均等に縮む

.container {
  display: flex;
  width: 250px;
  height: 200px;
}

.item {
  flex-shrink: 1;
}

スペースが足りない場合、すべてのアイテムが均等に縮みます。

flex-shrink: 0：縮まない

.item {
  flex-shrink: 0;
}

アイテムは元のサイズを維持し、コンテナからはみ出します。

異なるflex-shrink値：比率で縮む

.item-1 { flex-shrink: 1; }
.item-2 { flex-shrink: 2; }
.item-3 { flex-shrink: 1; }

item-2は他の2倍の割合で縮みます。スペースが足りない時、中央のアイテムがより多く縮小します。

flex-basis：基準サイズの設定

flex-basisは、flex-growやflex-shrinkが適用される前の、アイテムの基準サイズを設定します。

flex-basis: auto（初期値）：widthに従う

.container {
  display: flex;
  width: 600px;
  height: 200px;
}

.item {
  width: 100px;
  height: 80px;
  flex-basis: auto;
}

widthプロパティの値がそのまま基準サイズになります。

flex-basis: 具体的な値

.item {
  flex-basis: 150px;
}

widthの代わりにflex-basisで基準サイズを指定します。フレックスボックスではwidthよりflex-basisが優先されます。

flex-basis: 0とflex-grow

.item {
  flex-basis: 0;
  flex-grow: 1;
}

基準サイズを0にして、flex-growで均等に伸ばすと、完全に均等な幅になります。

flexショートハンド

flexプロパティは、flex-grow、flex-shrink、flex-basisをまとめて設定できるショートハンドです。

flex: 1（よく使う設定）

.container {
  display: flex;
  width: 600px;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px solid #333;
  margin: 20px auto;
}

.item {
  width: 100px;
  height: 80px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

アイテムが均等な幅で配置されます。最もよく使用される設定です。

flex: 0 0 auto（固定サイズ）

.item {
  flex: 0 0 auto;
  /* 伸びない、縮まない、元のサイズを維持 */
}

アイテムのサイズを固定したい場合に使用します。

flex: 2 1 200px（カスタム設定）

.item-1 { 
  flex: 1 1 100px; 
}
.item-2 { 
  flex: 2 1 200px; 
}
.item-3 { 
  flex: 1 1 100px; 
}

item-2は基準200px、伸びる比率2、縮む比率1で動作します。柔軟なレイアウトが実現できます。

align-self：個別のアイテム配置

align-selfは、特定のアイテムだけ交差軸方向の配置を変更できます。

各アイテムで異なる配置

.container {
  display: flex;
  align-items: center;
}

.item-1 { align-self: flex-start; }
.item-2 { align-self: center; }
.item-3 { align-self: flex-end; }

コンテナのalign-itemsを上書きして、各アイテムを個別に配置できます。item-1は上端、item-2は中央、item-3は下端に配置されます。

order：表示順序の変更

orderプロパティを使うと、HTMLの順序を変えずに、表示順序だけを変更できます。

orderで順序を入れ替える

.container {
  display: flex;
}
.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }

表示順序が「2、3、1」になります。orderの値が小さいものから順に表示されます。

まとめ

フレックスボックスを使えば、複雑なレイアウトも簡単に実現できます。

プロパティを変更するたびに、レイアウトがどう変化するかを観察することで、フレックスボックスの理解が深まります。最初は基本的なプロパティから始めて、徐々に複雑な組み合わせに挑戦していきましょう。