Documentation CSS

この記事で学べること

  • align-itemsプロパティの基本構文と使い方
  • 各値（stretch, flex-start, flex-end, center, baseline）の効果
  • ナビゲーションバーやカードレイアウトでの活用法
  • justify-contentとの違いと組み合わせ方
  • 注意点とトラブルシューティング

概要

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

align-itemsの基本

構文

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

主な値

値説明使用例
stretchアイテムをコンテナの高さいっぱいに伸ばす（デフォルト）均等な高さのカードレイアウト
flex-startアイテムをコンテナの上端に揃えるヘッダーのロゴ配置
flex-endアイテムをコンテナの下端に揃えるフッターのアイコン配置
centerアイテムをコンテナ内で中央に配置ボタンやアイコンの垂直中央揃え
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デザインを実現しましょう。

ポイントの振り返り

項目内容
適用対象Flexboxコンテナ
制御する軸交差軸（通常は垂直方向）
デフォルト値stretch
関連プロパティjustify-content（主軸）、align-self（個別要素）

参考文献

円