CSS 入門

CSS Flexbox入門

Flexbox（フレックスボックス）は、CSSにおける強力なレイアウトツールです。コンテナ内のアイテムのサイズが不明だったり動的に変化したりする場合でも、アイテム間の整列、対向、スペース配分を効率的に行うことができます。

これは「一次元レイアウトモデル」です。つまり、行（水平方向）または列（垂直方向）のいずれかのレイアウト制御には非常に長けていますが、両方を同時に制御することはできません。モダンなWeb開発においてFlexboxのマスターは不可欠です。なぜなら、従来のCSS技術では極めて困難、あるいは不可能だった複雑なレスポンシブレイアウトを大幅に簡素化できるからです。

1. コアコンセプト：Flexboxの理解

Flexboxレイアウトは、主に2つのパーツで構成されます：フレックスコンテナ (Flex Container) と フレックスアイテム (Flex Items) です。

  • フレックスコンテナ： フレックスアイテムを包む親要素。
  • フレックスアイテム： フレックスコンテナの直下の子要素。

あるコンテナに display: flex または display: inline-flex を設定するだけで、その要素はフレックスコンテナになり、内部の直下の子要素は自動的にフレックスアイテムへと変わります。

1.1 フレックスコンテナ (The Flex Container)

フレックスコンテナは、Flexboxレイアウトの基盤です。子要素に対してフレックスコンテキストを作成し、サイズ、位置、整列方法を自由自在にコントロールできるようにします。

フレックスコンテナの作成方法：

要素に対して display プロパティを適用し、以下のいずれかの値を使用します。

  • display: flex;：ブロックレベルのフレックスコンテナを生成します。利用可能な全幅を占有し、新しい行から開始されます。
  • display: inline-flex;：インラインレベルのフレックスコンテナを生成します。必要な幅のみを占有し、周囲のコンテンツと同じ行内に配置されます。
<div class="container">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>
.container {
  display: flex; /* フレックスコンテナを作成 */
  background-color: #f0f0f0;
  padding: 20px;
}

.container > div {
  background-color: #ddd;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

この例では、container クラスを持つ div がフレックスコンテナであり、ネストされた3つの div がフレックスアイテムです。デフォルトでは、これらのアイテムは一行に並びます。

1.2 フレックスアイテム (The Flex Items)

フレックスアイテムはコンテナの直下の子要素です。コンテナ側で定義されたルールに従ってレイアウトされますが、アイテム個別にプロパティを設定して独自の挙動を与えることも可能です。

フレックスアイテムの主要プロパティ：

  • flex-grow: 余剰スペースがある場合、他のアイテムに対してどの程度の比率で拡大するかを決定します。
  • flex-shrink: スペースが不足している場合、他のアイテムに対してどの程度の比率で縮小するかを決定します。
  • flex-basis: 余剰スペースを分配する前の、主軸方向におけるアイテムの初期サイズを指定します。
  • flex: flex-grow、flex-shrink、flex-basis を同時に設定できるショートハンドプロパティです。
  • order: アイテムがコンテナ内に表示される順序を制御します。
  • align-self: 特定のアイテムに対して個別の整列方法を設定します（コンテナの align-items プロパティを上書きします）。

サイズ配分の例：

<div class="container">
  <div style="flex: 1;">アイテム 1</div>
  <div style="flex: 2;">アイテム 2</div>
  <div style="flex: 1;">アイテム 3</div>
</div>

この例では、「アイテム 2」が占有するスペースは「アイテム 1」や「アイテム 3」の2倍になります。これは flex-grow に相当する値が 2 に設定され、他は 1 だからです。

1.3 主軸と交差軸 (Main Axis and Cross Axis)

Flexboxを完全にマスターするには、これら2つの軸を理解することが極めて重要です。

  • 主軸 (Main Axis)： フレックスアイテムが並ぶ主要な方向。主軸の方向は flex-direction プロパティによって決まります。デフォルトでは水平方向（左から右）です。
  • 交差軸 (Cross Axis)： 主軸に対して垂直な軸。コンテナ内でのアイテムの整列を制御するために使用されます。主軸が水平なら交差軸は垂直になり、その逆も同様です。

例：

flex-direction を row（デフォルト）に設定すると、主軸は水平、交差軸は垂直になります。column に設定すると、主軸は垂直になり、交差軸は水平になります。

2. なぜ Flexbox を使うのか？

Flexboxは、従来のCSSレイアウト（float や position など）と比較して圧倒的な優位性を持っており、モダンなフロントエンド開発には欠かせないツールです。

2.1 メリット1：レイアウトの劇的な簡素化

かつては複雑な計算やハック的な手法が必要だったレイアウトも、今では数行のCSSで完結します。

例：ナビゲーションバーの作成
アイテムを均等に配置し、垂直方向の中央揃えを実現します。

<nav class="navbar">
  <a href="#">ホーム</a>
  <a href="#">会社概要</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</nav>
.navbar {
  display: flex;
  justify-content: space-around; /* アイテムを均等に分布 */
  align-items: center;           /* アイテムを垂直中央揃え */
  background-color: #333;
  color: white;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
}

2.2 メリット2：ネイティブなレスポンシブデザイン

Flexboxは本質的にレスポンシブ設計のために作られています。アイテムは利用可能なスペースに応じて自動的に拡大・縮小し、メディアクエリと組み合わせることで配置順序や方向も簡単に変更できます。

例：大画面では横並び、小画面では縦並び

<div class="container">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap; /* アイテムの折り返しを許可 */
}

.container > div {
  width: 30%; /* 各アイテムはコンテナ幅の 30% */
  margin: 10px;
}

/* 小画面ではアイテムを列（垂直）方向に表示 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .container > div {
    width: 100%; /* 各アイテムはコンテナ幅の 100% */
  }
}

2.4 メリット4：HTML構造に縛られない順序制御

order プロパティを使用すれば、HTMLソースの構造を変更することなく、ページ上の視覚的な順序をいつでも自由に変更できます。これは、デバイスの画面サイズに合わせてレイアウトを微調整する際に非常に便利です。

例：表示順序の変更

<div class="container">
  <div style="order: 3;">アイテム 1</div>
  <div style="order: 1;">アイテム 2</div>
  <div style="order: 2;">アイテム 3</div>
</div>
.container {
  display: flex;
}

.container > div {
  background-color: #ddd;
  margin: 10px;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

注意： 上記の例では、HTML上の記述順では「アイテム 1」が先頭ですが、order が 3 に設定されているため、最終的にページに表示される順序は アイテム 2 → アイテム 3 → アイテム 1 となります。