CSS 入門

CSS align-items 属性

align-items は、フレックスコンテナ（Flex Container）内において、フレックスアイテム（Flex Items）を交差軸（Cross Axis）に沿ってどのように配置するかを制御するためのプロパティです。

前の章では、主軸（Main Axis）上の配置を扱う justify-content について学びました。今回は焦点を交差軸に移し、align-items の各値がアイテムのポジショニングにどのような影響を与えるのかを詳しく探っていきます。

1. 交差軸（Cross Axis）の理解

align-items の詳細に入る前に、まず交差軸とは何かを復習しておきましょう。交差軸は常に主軸と垂直に交わります。そして、主軸の方向は flex-direction プロパティによって決定されます。

  • flex-direction: row（デフォルト）の場合: 主軸は水平方向、交差軸は垂直方向になります。
  • flex-direction: column の場合: 主軸は垂直方向、交差軸は水平方向になります。

交差軸の概念を深く理解することは、align-items がどのように機能するかを把握するための基礎となります。

2. align-items の属性値

align-items プロパティにはいくつかの異なる値を指定でき、それぞれが交差軸上での特定の整列挙動を指示します。

  • stretch (デフォルト値): アイテムが引き伸ばされ、コンテナの交差軸方向のサイズいっぱいに広がります。
  • flex-start: アイテムを交差軸の起点（スタート地点）に整列させます。
  • flex-end: アイテムを交差軸の終点（エンド地点）に整列させます。
  • center: アイテムを交差軸上の中央に整列させます。
  • baseline: アイテムをテキストのベースライン（基準線）に基づいて整列させます。

それぞれの値を詳細な例と共に見ていきましょう。

2.1 stretch（デフォルトの挙動）

stretch は align-items のデフォルト値です。これにより、フレックスアイテムはコンテナの高さを埋めるように引き伸ばされます（flex-direction が column の場合は幅を埋めます）。コンテナに固定の高さがある場合、アイテムはその高さに一致するように拡張されます。コンテナの高さがコンテンツによって決まる場合、すべてのアイテムは最も高さがあるアイテムに合わせて引き伸ばされます。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2<br>さらに多くのコンテンツを含む<br>高さがある</div>
  <div class="item">アイテム 3</div>
</div>
.container {
  display: flex;
  height: 200px; /* 固定高さ */
  align-items: stretch; /* デフォルト値のため、未指定でも適用されます */
  border: 1px solid black;
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
}

この例では、「アイテム 2」のコンテンツが他より多くても、すべてのアイテムがコンテナの高さ 200px を埋めるように引き伸ばされます。もしコンテナの height: 200px; を削除すると、すべてのアイテムは「アイテム 2」の自然な高さまで引き伸ばされます。

2.2 flex-start

flex-start は、フレックスアイテムを交差軸の起点に整列させます。
行ベースのレイアウト（デフォルトの flex-direction: row）では、アイテムはコンテナの上端に揃えられます。列ベースのレイアウト（column）では、コンテナの左端に揃えられます。

水平主軸（row）の例：上揃え

.container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  border: 1px solid black;
}
/* .item のスタイルは前述と同様 */

この場合、すべてのアイテムはコンテナの上端に配置され、下側の余ったスペースは空白のままになります。

垂直主軸（column）の例：左揃え

.container {
  display: flex;
  flex-direction: column; /* 列レイアウトに変更 */
  width: 200px; /* 効果を確認するため高さではなく幅を指定 */
  align-items: flex-start;
  border: 1px solid black;
}

この時、交差軸が水平方向になるため、アイテムはコンテナの左側に整列されます。

2.3 flex-end

flex-end は、フレックスアイテムを交差軸の終点に整列させます。
行レイアウトではアイテムがコンテナの下端に、列レイアウトではコンテナの右端に揃えられます。

水平主軸（row）の例：下揃え

.container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  border: 1px solid black;
}

ここでは、すべてのアイテムがコンテナの下端に沈み込むように配置されます。

垂直主軸（column）の例：右揃え

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: flex-end;
  border: 1px solid black;
}

column 設定時、アイテムはコンテナの右側に整列されます。

2.4 center

center は、フレックスアイテムを交差軸上の中央に配置します。
行レイアウトではコンテナ内で垂直中央に、列レイアウトでは水平中央に整列されます。

水平主軸（row）の例：垂直中央揃え

.container {
  display: flex;
  height: 200px;
  align-items: center;
  border: 1px solid black;
}

アイテムはコンテナ内で完璧な垂直中央揃えを実現します。

垂直主軸（column）の例：水平中央揃え

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: center;
  border: 1px solid black;
}

この構成では、アイテムがコンテナの内部で水平中央に配置されます。

2.5 baseline

baseline は、アイテム内部のテキストのベースライン（baseline）に基づいて整列させます。これは、フレックスアイテム内のテキストサイズが異なる場合に非常に便利です。ベースラインとは、ほとんどのフォントにおいて文字が「座っている」仮想的な線のことです。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item" style="font-size: 2em;">アイテム 2 (大)</div>
  <div class="item">アイテム 3</div>
</div>
.container {
  display: flex;
  height: 200px;
  align-items: baseline;
  border: 1px solid black;
}

この例では、「アイテム 2」のフォントサイズが大きくなっています。baseline 整列を使用することで、それぞれのフォントサイズやボックスの高さが異なっていても、すべてのアイテム内のテキストの底辺（ベースライン）が同一水平線上に揃うようになります。

       重要な注意点: baseline 整列はアイテム内のテキストに強く依存します。アイテムにテキストが含まれていない場合や、画像などの非標準的なレンダリングが使用されている場合、期待通りの効果が得られないことがあります。

3. デモと実戦ケース

align-items の理解を深めるための実用的な例を紹介します。

3.1 ケース 1：完璧な垂直中央揃えのログインフォーム

align-items の最も一般的なユースケースの一つが、コンテンツの垂直中央揃えです。ページの中央にログインフォームを配置したい場合を想定します。

<div class="container">
  <form>
    <label for="username">ユーザー名：</label><br>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">パスワード：</label><br>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit">ログイン</button>
  </form>
</div>
.container {
  display: flex;
  justify-content: center; /* 主軸（水平）中央揃え */
  align-items: center;     /* 交差軸（垂直）中央揃え */
  height: 100vh;           /* コンテナをビューポート全体の高さにする */
  background-color: #f0f0f0;
}

form {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

ここでは、justify-content: center でフォームを水平中央に、align-items: center で垂直中央に配置しています。コンテナの height: 100vh により、画面全体の高さに対して完璧な中央配置が実現されます。

3.2 ケース 2：ナビゲーションバーのコンテンツ整列

ナビゲーションバーを作成する際、リンクやアイコンが垂直方向に揃っている必要があります。

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

.navbar a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

.navbar に align-items: center を設定することで、各リンクの高さやフォントサイズに関わらず、すべてのナビゲーションリンクがナビゲーションバーの内部で垂直中央に整列されます。