CSS Flexboxの使い方と各プロパティの詳細解説

CSS

CSS Flexboxは、柔軟なレイアウトを実現するためのCSSレイアウトモジュールで、複雑なレイアウトでも少ないコードでシンプルに実装できます。この記事では、CSS Flexboxの基礎知識、各プロパティの機能、そしてFlexboxを使ったレイアウトの具体例を詳しく解説します。

CSS Flexboxの基礎

Flexboxは、親要素であるflexコンテナとその中の子要素であるflexアイテムで構成されています。Flexboxの基本概念を理解することが、効果的なレイアウト作成の鍵です。

Flexboxのブラウザサポート

以下の主要なブラウザでサポートされています：

  • Chrome 29+
  • Firefox 28+
  • Safari 9+
  • Edge 12+
  • IE 11+

Flexコンテナのプロパティ

flex-direction

flex-directionプロパティは、flexアイテムの配置方向を設定します。以下の値が利用可能です：

  • row：デフォルト。アイテムを水平方向に配置。
  • row-reverse：水平方向に逆順で配置。
  • column：垂直方向に配置。
  • column-reverse：垂直方向に逆順で配置。
.flex-container {
  flex-direction: row;
}

flex-wrap

flex-wrapプロパティは、flexアイテムを単一行または複数行に配置するかを指定します。

  • nowrap：デフォルト。単一行に配置。
  • wrap：複数行に配置。
  • wrap-reverse：複数行に逆順で配置。
.flex-container {
  flex-wrap: nowrap;
}

flex-flow

flex-flowプロパティは、flex-directionとflex-wrapをまとめて設定するショートハンドです。

.flex-container {
  flex-flow: row nowrap;
}

justify-content

justify-contentプロパティは、主軸に沿ってアイテムを配置します。

  • flex-start：デフォルト。アイテムを先頭に寄せて配置。
  • flex-end：アイテムを後尾に寄せて配置。
  • center：アイテムを中央に配置。
  • space-between：先頭と後尾は端に、他は等間隔に配置。
  • space-around：全てのアイテムを等間隔に配置。
.flex-container {
  justify-content: flex-start;
}

align-items

align-itemsプロパティは、クロス軸に沿ってアイテムを配置します。

  • stretch：デフォルト。アイテムをコンテナの高さ（または幅）いっぱいに配置。
  • flex-start：アイテムを先頭にまとめて配置。
  • flex-end：アイテムを後尾にまとめて配置。
  • center：アイテムを中央にまとめて配置。
  • baseline：アイテムをベースラインに沿って配置。
.flex-container {
  align-items: stretch;
}

align-content

align-contentプロパティは、複数行のアイテムをクロス軸に沿って配置します。

  • flex-start：アイテムを先頭に寄せて配置。
  • flex-end：アイテムを後尾に寄せて配置。
  • center：アイテムを中央に配置。
  • space-between：先頭と後尾は端に、他は等間隔に配置。
  • space-around：全てのアイテムを等間隔に配置。
.flex-container {
  align-content: flex-start;
}

Flexアイテムのプロパティ

order

orderプロパティは、flexアイテムの表示順序を設定します。

.flex-item {
  order: 1;
}

flex-grow

flex-growプロパティは、flexアイテムの伸長係数を設定します。

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

flex-shrink

flex-shrinkプロパティは、flexアイテムの縮小係数を設定します。

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

flex-basis

flex-basisプロパティは、flexアイテムの初期サイズを設定します。

.flex-item {
  flex-basis: auto;
}

flex

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

.flex-item {
  flex: 1 1 auto;
}

align-self

align-selfプロパティは、個々のflexアイテムの配置方法を設定します。align-itemsを上書きします。

.flex-item {
  align-self: flex-start;
}

Flexboxレイアウトの具体例

Flexboxを使うと、レスポンシブで柔軟なレイアウトを簡単に実装できます。以下は、Flexboxを使用したレイアウトの一例です。

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.flex-item {
  flex: 1;
  padding: 10px;
}

この例では、3つのアイテムが水平方向に等間隔で配置され、各アイテムの幅が均等に調整されます。

まとめ

CSS Flexboxは、レイアウトを簡潔にし、少ないコードで柔軟なレイアウトを実現する強力なツールです。各プロパティの理解と適切な活用により、複雑なレイアウトでも効率的に構築できます。CSS Flexboxの詳細なプロパティと使い方を理解し、実際のプロジェクトで効果的に活用しましょう。