CSSで使うalign-itemsとalign-contentの違い
FlexboxやGridレイアウトを使って要素の配置を調整する際に、align-itemsとalign-contentというプロパティは頻繁に登場します。しかし、両者の役割が似ているため、どう使い分けるべきかがわかりにくいことも。この記事では、align-itemsとalign-contentの違いについて、具体例を交えながら解説していきます。
1. 基本的な違い
align-itemsとalign-contentの違いをシンプルに表すと：
align-items: 各アイテム（要素）の位置を揃えるためのプロパティalign-content: アイテム全体を包むコンテナの余白を調整するプロパティ
2. align-itemsとは？
align-itemsは、コンテナ内での各アイテムの配置を指定するプロパティです。FlexboxやGridレイアウトで使用でき、コンテナのクロス軸（交差する軸、通常は縦方向）に沿って各アイテムを配置します。
| 値 | 説明 |
|---|---|
flex-start | アイテムをコンテナの先頭に配置 |
flex-end | アイテムをコンテナの終わりに配置 |
center | アイテムをコンテナの中央に配置 |
stretch | アイテムをコンテナの高さに合わせて拡張 |
baseline | 各アイテムのテキストのベースラインを揃える |
使用例
.container{display: flex; align-items: center; /* アイテムを中央に配置 */}
この例では、コンテナの縦方向の中央にアイテムが並びます。
3. align-contentとは？
align-contentは、複数行に分かれたアイテム全体の配置に関わります。これもクロス軸に沿って適用されるため、コンテナ内で余白があるときにのみ効果を発揮します。
| 値 | 説明 |
|---|---|
flex-start | 全体をコンテナの先頭に揃える |
flex-end | 全体をコンテナの終わりに揃える |
center | 全体をコンテナの中央に揃える |
space-between | 各行の間に均等な間隔を設ける |
space-around | 各行の前後に等間隔を設ける |
stretch | コンテナの高さに合わせてアイテムを拡張させる |
使用例
.container{display: flex; flex-wrap: wrap; align-content: space-between; /* 各行の間に均等な余白を設ける */}
この例では、複数行に分かれたアイテムが均等に配置され、余白がある部分に自動的にスペースが設定されます。
4. 使い分け方のポイント
- アイテム自体の位置を揃えたい場合:
align-items - アイテムのグループ全体を揃えたい場合:
align-content
5. 実際に試してみよう！
以下のコードを試して、align-itemsとalign-contentの効果を体感してみましょう。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS Align Example</title><style>.container{display: flex; flex-wrap: wrap; align-content: space-around; /* アイテム全体の配置 */align-items: flex-start; /* 各アイテムの配置 */height: 300px; border: 1pxsolid#333; }.item{background-color: #7f8c8d; width: 80px; height: 80px; margin: 10px; }</style></head><body><divclass="container"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div></div></body></html>
この例では、align-itemsとalign-contentの値を変えてみて、どのようにアイテムが配置されるか試してみてください。
まとめ
align-itemsは各アイテムの位置調整に使用align-contentはアイテムのグループ全体の配置に使用
align-itemsとalign-contentを使いこなすと、レイアウトの自由度が大幅に広がります！