概要

align-itemsは、CSSのFlexboxレイアウトでアイテムを垂直方向に整列させるためのプロパティです。justify-contentが水平方向の整列を制御するのに対し、align-itemsは垂直方向（交差軸）での配置を管理します。アイテムの高さを統一したり、上寄せや下寄せなど、目的に応じたレイアウトを実現する際に非常に役立ちます。

align-itemsの基本

構文

.flex-container {
display: flex;
align-items: <値>;
}

主な値

1. stretch（デフォルト） アイテムをコンテナの高さいっぱいに伸ばします。
2. flex-start アイテムをコンテナの上端に揃えます。
3. flex-end アイテムをコンテナの下端に揃えます。
4. center アイテムをコンテナ内で中央に配置します。
5. baseline アイテムのテキストのベースラインに揃えます。

各値の詳細と使用例

stretch（デフォルト）

stretchは、アイテムの高さをコンテナの高さに合わせて引き伸ばします。アイテムの高さが特に指定されていない場合に有効で、コンテナ全体にアイテムを均等に広げたい場合に適しています。

.container {
display: flex;
align-items: stretch; /* デフォルト：高さを引き伸ばす */
}

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

flex-start

flex-startは、アイテムをコンテナの上端に揃えます。リストやメニューアイテムを上寄せしたい場合に役立ちます。

.container {
display: flex;
align-items: flex-start; /* 上寄せ */
}

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

flex-end

flex-endは、アイテムをコンテナの下端に揃えます。下寄せにすることで、下に揃えたボタンやアイコンのレイアウトが簡単に作れます。

.container {
display: flex;
align-items: flex-end; /* 下寄せ */
}

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

center

centerは、アイテムをコンテナの中央に配置します。ボックスの中で要素を垂直方向に均等に配置する場合に使うと、ビジュアル的にバランスの良いデザインが実現できます。

.container {
display: flex;
align-items: center; /* 中央寄せ */
}

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

baseline

baselineは、アイテムのテキストのベースラインに揃えます。複数の要素が異なる高さを持っている場合でも、テキストの基準を揃えたいときに便利です。

.container {
display: flex;
align-items: baseline; /* テキストのベースラインに揃える */
}

<div class="container">
<div style="font-size: 20px;">Item 1</div>
<div style="font-size: 14px;">Item 2</div>
<div style="font-size: 18px;">Item 3</div>
</div>

この場合、異なる高さのアイテムでも、テキストのベースラインが揃うように表示されます。

使用シーンと注意点

• ナビゲーションバーやメニュー
  flex-startやflex-endを使用することで、リンクやボタンを上下端に揃えて整然と配置することができます。
• カードレイアウト
  centerを使用すると、異なるサイズの要素があっても、中央寄せで見栄えの良いレイアウトが作れます。
• フォーム要素の整列
  baselineを使うことで、ラベルと入力フィールドのテキストを揃えて一貫した見た目を保てます。

注意点

• stretchはデフォルトの動作ですが、アイテムに固定の高さを設定すると無効になります。この場合は手動で高さを調整する必要があります。
• align-itemsは交差軸（通常は垂直方向）に作用しますが、横並びの設定やアイテムの方向が変わると、意図した配置にならないことがあります。その場合、flex-directionプロパティとの組み合わせを調整しましょう。

まとめ

align-itemsプロパティは、Flexboxを使用したレイアウトで垂直方向の整列を管理するための重要なプロパティです。各値を理解し、目的に応じて適切に使い分けることで、見やすく整ったレイアウトを簡単に作成できます。アイテムの配置を柔軟に調整することで、より効果的なWebデザインを実現しましょう。