フレックスボックスとグリッドレイアウト

今回のゴール

• フレックスボックス、グリッドを使ったレイアウトの方法や特徴について理解する

フレックスボックスの利用

要素に display: flex を設定することで、フレックスボックスが利用できます。
アプリケーションを開発する上で、フレックスボックスはよく利用するレイアウトフローです。
フレックスボックスを使うことで、以下のような問題を解決できます。

• 複数の要素を横に並べたい
• 要素を上下中央に配置したい
• スペースを要素に均等に分配したい

フレックスコンテナーとフレックスアイテム

display: flex を指定した要素をフレックスコンテナー、
その子要素をフレックスアイテムと呼びます。

<div class="container">  <!-- フレックスコンテナー -->
  <div>アイテム1</div>   <!-- フレックスアイテム -->
  <div>アイテム2</div>   <!-- フレックスアイテム -->
  <div>アイテム3</div>   <!-- フレックスアイテム -->
</div>

.container {
  display: flex;
}

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

display: flex を指定するだけで:

• フレックスアイテムが横一列に並ぶ
• フレックスアイテムの高さも揃う

.container {
  display: flex;
  background-color: #f0f0f0;
}
.container > div {
  background-color: coral;
  margin: 5px;
}

flex-wrap で折り返しを指定

フレックスアイテムがフレックスコンテナーの幅に収まりきらない時、flex-wrap で折り返し方法を指定できます。

.container {
  display: flex;
  flex-wrap: wrap;  /* 折り返しを有効にする */
}

• nowrap（既定値）: 折り返さない
• wrap: 折り返す
• wrap-reverse: 逆方向に折り返す

例: https://learn4-inc.github.io/public-contents/ps/flexbox-grid/#flex-wrap

フレックスアイテムのサイズ変更: 割合値

flex プロパティでアイテムを幅に合わせて自動的に伸び縮みさせることができます。数値を指定して伸び縮みの割合を設定できます。

.container {
  display: flex;
}
.item {
  flex: 1;  /* 全アイテムが同じ割合 */
}
.item-large {
  flex: 2;  /* 他の2倍の幅を取る */
}

flex: 1 は「残りのスペースを1単位分取る」という意味です。

フレックスアイテムのサイズ変更: 最小サイズ

flex に最小サイズを指定することもできます。

.item {
  flex: 1 150px;  /* 最小150px、残りは均等分配 */
}
.item-large {
  flex: 2 150px;  /* 最小150px、残りは2倍の割合で取る */
}

最初に各アイテムに150pxが割り当てられ、残りのスペースが割合で分配されます。

例: https://learn4-inc.github.io/public-contents/ps/flexbox-grid/#flex-min-size

水平方向の配置: justify-content

justify-content はアイテムの 主軸（横方向） の配置方法を定めます。

垂直方向の配置: align-items

align-items はアイテムの 交差軸（縦方向） の配置方法を定めます。

配置の例

.container {
  display: flex;
  justify-content: center;      /* 横方向中央 */
  align-items: center;          /* 縦方向中央 */
  height: 300px;
}

→ アイテムがコンテナーのど真ん中に配置される

例: https://learn4-inc.github.io/public-contents/ps/flexbox-grid/#center-example

flex-direction で並ぶ方向を変更

flex-direction プロパティで、アイテムの並ぶ方向を変更できます。例えば、 flex-direction: column を指定すると、アイテムが縦に並びます。

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

<div class="container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

例: https://learn4-inc.github.io/public-contents/ps/flexbox-grid/#flex-direction

フレックスボックスをどういう時に使うか

横または縦の一方向にレイアウトする際に最適です。

グリッドレイアウトとは

グリッドレイアウトは、要素を行と列の格子状に配置するレイアウト方法です。

• 縦と横の2次元のレイアウトに最適
• 行と列を同時に制御できる

.container {
  display: grid;
}

グリッドレイアウトの基本

display: grid と grid-template-columns で列を定義します。

.container {
  display: grid;
  grid-template-columns: 200px 200px;  /* 2列 */
}

<div class="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

→ 4つの要素が2列の表として配置される (MDN Playground)

fr 単位を使った柔軟なグリッド

fr（fraction）単位は、利用可能なスペースを比率で分配します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3等分 */
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;  /* 2:1:1 の比率 */
}

→ 最初の列が全体の50%、残り2列が各25%

MDN Playground

repeat() で繰り返し指定

同じサイズの列が複数ある場合、repeat() が便利です。

/* この2つは同じ意味 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);

/* 12列のグリッド */
grid-template-columns: repeat(12, 1fr);

gap でトラック間隔を指定

gap プロパティで、行と列の間隔を指定できます。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;  /* 行と列の両方に20pxの間隔 */
}

/* 行と列を別々に指定 */
row-gap: 20px;     /* 行の間隔 */
column-gap: 10px;  /* 列の間隔 */

グリッドレイアウトをどういう時に使うか

行と列のように格子上の配置を行う場合、グリッドレイアウトが最適です

補足: グリッドレイアウトと <table> の違い

格子状の配置は <table> 要素でも実現できますが、レイアウト目的での <table> の使用は推奨されません。

"表" としてのデータを表示する場合に <table> を用いて、格子状の配置を行う場合はグリッドレイアウトを使います。

まとめ

• フレックスボックス（display: flex）
  • 縦か横の一方向に並ぶレイアウト向け
  • justify-contentで横、align-itemsで縦の配置位置を調整できる
• グリッドレイアウト（display: grid）
  • 格子状の2次元レイアウト向け
  • grid-template-columnsで列の並びを、gapで間隔を指定できる

さらに調べるには

• フレックスボックス - MDN
• CSSグリッドレイアウト - MDN