align-contentとは？初心者向けに使い方と実例を解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

align-contentとは？

ウェブを作るとき、レイアウトをきれいにそろえるのが大切です。そのとき使うのが CSS の align-content という機能です。align-content は主に「複数行にわたる要素の並びを、交差軸方向にどう並べるか」を決めるための設定です。

ここでは flexbox と grid の両方での役割を分かりやすく解説します。特に flexbox の場合は「複数行ができるときの配置」にだけ効果がある点を覚えておきましょう。

flexboxとalign-content

flexbox では align-content は 複数行がある場合にのみ効果があります。1 行しかないときには効力を持ちません。うまく動かすには flex-wrap: wrap を使って複数行を作るのが前提です。

grid と align-content

grid レイアウトでは align-content はグリッド全体のブロック軸方向の配置を決めます。グリッドトラックが複数行で並ぶとき、その空きスペースをどう割り当てるかを指定します。

主な値

<th>値

意味
stretch	デフォルト。複数行の間隔を引き伸ばして埋める
center	ブロック軸の中央に配置
flex-start	先頭寄せ
flex-end	末尾寄せ
space-between	行の間を等間隔に広げる（端はくっつかない）
space-around	行の左右に均等な余白を作る
space-evenly	行間と端の余白を均等に配置

実践例

例 1: 複数のカードを横並びにして、ウィンドウの縦方向の余白を中央に集めたいとき

.container { display:flex; flex-wrap:wrap; height: 400px; align-content: center; }

この設定は、カードが複数行にわたるとき、行同士の間隔を中央へ集約します。重要なポイントは「複数行があるかどうか」と「交差軸の配置をどうするか」です。

例 2: 全行の間を等間隔に広げたい場合

.container { display:flex; flex-wrap:wrap; height: 320px; align-content: space-between; }

よくある誤解と注意点

多くの人は align-content がアイテム一つ一つの位置にも影響すると誤解します。しかし、それは align-items の領域です。実際には複数行があるときだけ作用します。

デバッグのコツ

ブラウザの開発者ツールを使って、flexbox か grid の設定を確認しましょう。要素の計算結果が思った通りでないときは、親要素の高さ、flex-wrap の状態、横軸・縦軸の配置プロパティを順に見ていくと原因が見つかりやすいです。

まとめと次のステップ

実務では、複雑なレイアウトを作る場面で align-content を使う機会が多いです。まずは flex-wrap を有効化して複数行を作り、その上で align-content の値を試してみましょう。慣れると grid 版と flexbox 版の見え方の差も理解しやすくなります。

まとめの一言

align-content は複数行が関わるレイアウトで力を発揮する設定です。おおまかな使い方を覚え、実際のデザインで試していくと、レイアウトの柔軟性がぐんと上がります。

align-contentの同意語

交差軸上のライン整列: flex コンテナの交差軸方向に並ぶ複数のラインを、どう揃えるかを決める設定。余白がある場合のラインの配置方法を決定します。
複数ラインの配置: コンテナ内の複数ラインを、交差軸に沿って整列・配置する方法を指定します。
ライン間の空間分配: ライン同士の間の空白をどう割り振るかを決定します。中央寄せ・等間隔・端寄せなどの挙動を選べます。
ラインの配置（交差軸）: 複数ラインを交差軸方向にどのように配置するかを定義する表現です。
行の配置（交差軸方向）: 複数の行を交差軸方向にどの位置に揃えるかを決める設定です。
コンテンツ行の整列: コンテナ内の“行”として並ぶラインを整列させる機能です。
内容の整列（交差軸方向）: 交差軸方向のコンテンツを、中央寄せや端寄せ、等間隔などで整える指示です。
複数行の整列: flex/grid コンテナ内の複数行を、指定のルールで整列させる設定です。
交差軸におけるラインの揃え: 交差軸方向のラインを揃える（揃え方を指定する）設定の言い換えです。
交差軸上の行の並び: 交差軸方向に並ぶ行の並び方を決める設定です。

align-contentの対義語・反対語

非整列: ラインを整列させず、跨軸方向の整列規則を適用しない状態。align-contentの対極として、規則的な配置を避けるイメージです。
乱れ配置: ライン間の間隔を均等にせず、乱雑に並ぶ配置のこと。
ばらつき配置: ライン間のスペースが一定ではなく、様々な間隔で並ぶ配置です。
自由配置: 整列規則を設けず、自由にラインを配置する状態。制約が少ないイメージ。
不揃え: ラインを同じ高さ・位置に揃えず、揃えの反対の状態を指します。
散在配置: ラインが空間全体に散らばり、均等な集約感がない配置です。
規則性なし: 配置のリズムや法則性がなく、予測しづらい並びになります。
崩れた整列: 整列の規칙性を意図的に崩した配置のこと。

align-contentの共起語

align-items: flexbox やグリッドコンテナ内でアイテムの交差軸方向の揃え方を決めるプロパティ。align-content と併用して、複数行・複数列の時の配置と組み合わせて使われることが多い。
justify-content: 主軸方向のアイテムの配置を決めるプロパティ。space-between や center などの値と組み合わせて、行／列の並び方を調整する。
display: 要素をレイアウトコンテナにするかどうかを決める基礎プロパティ。flex（フレックスボックス）や grid（グリッド）を有効化する入口となる。
flex-direction: 主軸の方向を設定するプロパティ。row／column などで並び方を決める。
flex-wrap: アイテムを複数行（または列）に折り返すかどうかを決める。nowrap、wrap、wrap-reverse などの選択肢がある。
grid: グリッドレイアウトを適用する基本モード。display: grid を指定したときのグリッドコンテナになる。
grid-template-columns: グリッドの列構成を定義する。列の数と幅を具体的に決める。
grid-template-rows: グリッドの行構成を定義する。行の数と高さを決める。
grid-auto-rows: 自動生成されるグリッド行の高さを設定する。
grid-auto-columns: 自動生成されるグリッド列の幅を設定する。
grid-auto-flow: 自動配置の流れを制御する。行主導か列主導か、dense で詰めるかなどを指定する。
gap: アイテム間の横方向と縦方向のギャップを一括で設定する。row-gap と column-gap の組み合わせを含む概念。
row-gap: 行方向のギャップを個別に設定する。
column-gap: 列方向のギャップを個別に設定する。
align-self: 個々のアイテムの交差軸方向の揃えを個別に設定する。
justify-items: アイテム全体の主軸方向の揃え方を統一して設定する。グリッドで使われるがフレックスにも関連する。
justify-self: 個々のアイテムの主軸方向の揃えを個別に設定する。
main-axis: レイアウトの主軸の概念。flexbox では主軸方向を指す基本用語。
cross-axis: レイアウトの交差軸の概念。align-content/align-items の軸を理解する際に出てくる用語。
space-between: アイテム間のスペースを等間隔に配置する値。
space-around: アイテム間と端にも均等なスペースを配置する値。
space-evenly: アイテム間を等間隔に配置する値。新しい仕様で追加されたことがある。
stretch: アイテムを可能な限り引き伸ばして配置するデフォルト挙動の一つ。
center: 中央寄せの配置。主軸・交差軸のいずれにも適用されうる値。
flex-start: 主軸の先頭寄せ。
flex-end: 主軸の末尾寄せ。
min-content: 最小コンテンツサイズを指す値。グリッド／フレックスのサイズ計算で使われる。
max-content: 最大コンテンツサイズを指す値。サイズ制約の一つとして使われる。
auto-fit: グリッドのトラックを自動的にフィットさせる挙動。空のトラックにもアイテムを拡張することがある。
auto-fill: グリッドのトラックを自動生成して埋める挙動。空のトラックも埋める点が特徴。
grid-area: グリッドアイテムの配置先エリア名を指定する。grid-area の名前を使って配置を指定する際に使われる。
CSS Grid: CSS のグリッドレイアウト全般を指す総称。
Flexbox: CSS のフレックスボックスレイアウトの総称。align-content などの配置プロパティが中心。
グリッドレイアウト: グリッドを用いたレイアウト手法の日本語表現。
フレックスボックス: Flexbox の日本語表現。主軸・交差軸を用いた配置設計を行うレイアウトモデル。

align-contentの関連用語

align-content: flexbox または CSS Grid のコンテナで、交差軸方向に複数のライン（flex lines）をどう配置するかを決めるプロパティ。初期値は stretch。値には flex-start、flex-end、center、space-between、space-around、space-evenly、stretch などがある。
align-items: 各ライン内のアイテムを交差軸方向にどう揃えるかを決めるプロパティ。主に cross-axis の整列を制御する。
align-self: 個々のアイテムに対して、ライン全体の整列を上書きするプロパティ。auto の場合は親の align-items が適用される。
justify-content: 主軸方向のアイテム全体の配置を決めるプロパティ。中央寄せ、端寄せ、等間隔などの配置を指定する。
justify-items: Grid コンテナで、アイテムを主軸方向にどう配置するかを規定するプロパティ。Flexbox には基本的には対応していないが、Grid で有効。
justify-self: 各アイテムの自己配置を主軸方向に設定するプロパティ。インライン軸方向の配置を個別に調整する。
flex-wrap: アイテムを複数のラインに折り返すかどうかを決めるプロパティ。nowrap、wrap、wrap-reverse がある。
flex-direction: 主軸の向きを決めるプロパティ。row、row-reverse、column、column-reverse のいずれかを指定する。
flex-flow: flex-direction と flex-wrap を同時に指定するショートハンド。例: flex-flow: row wrap;
flex: アイテムの成長・縮小と基準サイズを一括指定するショートハンド。flex-grow、flex-shrink、flex-basis の組み合わせ。
grid: CSS Grid レイアウトのコンテナ。行と列のグリッドを定義し、align-content はグリッドの行間の配置にも影響する。
main-axis: 主軸。flex-direction の設定に従って水平または垂直方向の並びの軸を指す。
cross-axis: 交差軸。主軸と直交する方向の軸で、align-content/align-items が作用する方向。
flex-line: アイテムが集まって形成される1つのライン（行または列）。複数ラインが存在する場合、align-content が影響を及ぼす対象となる。
multi-line: 複数のラインを形成する状態のこと。主に flex-wrap が wrap などで有効になる状況を指す。
box-alignment: ボックスの整列を総括する概念。align-content、align-items、justify-content などの組み合わせを含む広い用語。
space-between: アイテム間に等間隔のスペースを配置する align-content の値。
space-around: アイテム間に等しいスペースを配置し、両端にも半分ずつのスペースを作る値。
space-evenly: アイテム間と両端に等間隔のスペースを配置する値。
flex-start: 主軸の先頭寄りにアイテムを揃える値（align-content の一部の配置値として使用される）。
flex-end: 主軸の末尾寄りにアイテムを揃える値。
center: 主軸の中央にアイテムを揃える値。
stretch: 余白がある場合、ラインを可能な限り引き伸ばす初期値。アイテムのサイズを均等に拡大する動作。
vendor-prefix -webkit-align-content: ウェブキット系ブラウザ用のベンダープリフィックス。古い環境での互換性確保のために使われたが、現在は一般的に不要。