Flexboxを使ったレイアウトでは、align-items と align-content の違いが分からず、「指定しても効かない」「なぜ位置が変わらないのか理解できない」と感じることがよくあります。この2つは似た名前を持っていますが、作用する対象も前提条件もまったく異なるプロパティです。本記事では、Flexboxのレイアウト計算の仕組みを踏まえながら、align-items と align-content の違いと、実務での正しい使い分けを整理して解説します。
align-itemsが制御するもの
align-items は、フレックスアイテム「1行分」における交差軸方向の配置を制御するプロパティです。Flexboxでは主軸（flex-direction で決まる方向）とは直交する方向を交差軸と呼び、align-items は各アイテムがその交差軸方向にどう配置されるかを決定します。
.container {
display: flex;
align-items: center;
}
この指定により、各フレックスアイテムは行の中央に揃えられます。重要なのは、align-items は「アイテム単位」で効くプロパティであり、行全体の配置には関与しない点です。
align-contentが制御するもの
align-content は、複数行に分かれたフレックスライン全体の配置を制御します。flex-wrap によって折り返しが発生し、2行以上になった場合にのみ意味を持つプロパティです。1行しか存在しない場合、align-content は一切効果を持ちません。
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
この場合、複数行に分かれたアイテム群が、コンテナの上下に均等配置されます。
効かないと感じる原因の典型例
align-content が効かないと感じる最も多い原因は、フレックスアイテムが1行に収まっていることです。flex-wrap: nowrap（初期値）のままでは、行が1つしか存在しないため、align-content を指定しても何も起こりません。
一方で、align-items が効かないように見える場合は、アイテム自身の高さがコンテナと同じであるケースが多く、配置変化が視覚的に確認できていないだけ、ということもよくあります。
align-itemsとalign-contentの決定的な違い
align-items は「行の中のアイテム配置」、align-content は「行そのものの配置」を制御します。対象レベルが異なるため、同時に指定されていても競合することはありません。それぞれが別レイヤーでレイアウトに関与しています。
flex-start / center / stretch の挙動差
align-items: stretch は、アイテムの高さが未指定の場合に、行の高さまで引き伸ばします。一方、align-content: stretch は、複数行が存在する場合に、それぞれの行がコンテナいっぱいに引き伸ばされます。どちらも stretch という名前ですが、作用対象が異なるため、結果も大きく異なります。
実務でよく使うのはどちらか
実務では、align-items の使用頻度が圧倒的に高くなります。ナビゲーション、カード、ボタン配置など、多くのFlexboxレイアウトは1行構成であり、アイテムの縦位置調整が主目的になるためです。一方、align-content は、タイル状レイアウトやギャラリーなど、明示的に折り返しを伴うレイアウトでのみ活躍します。
justify-contentとの混同に注意する
align-items / align-content は交差軸方向、justify-content は主軸方向を制御します。縦横を混同すると、指定しても効かない原因になります。flex-direction が row か column かによって、主軸と交差軸が入れ替わる点も含めて理解しておく必要があります。
設計時の使い分け指針
アイテム単位の位置を揃えたい場合は align-items、複数行のまとまり全体をどう配置するかを制御したい場合は align-content、という切り分けを意識すると迷いがなくなります。さらに、align-content を使う場合は「flex-wrap が有効か」「複数行になっているか」を必ずセットで確認することが重要です。
まとめ
align-items と align-content は、名前は似ていても役割がまったく異なるFlexboxプロパティです。align-items は行内のアイテム配置、align-content は複数行の配置を制御します。この違いを理解し、flex-wrap の有無や行数を意識して使い分けることで、「効かないFlexbox」から脱却し、意図通りに制御できるレイアウト設計が可能になります。
