align-content

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

CSSalign-content プロパティは、フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定します。

下記のインタラクティブデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。

試してみましょう

単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がありません。

構文

css
/* 通常の配置 */
align-content: normal;

/* 基本的な位置による配置 */
/* align-content は left および right の値を取りません */
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;

/* ベースラインの配置 */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 均等配置 */
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;

/* あふれた場合の配置 */
align-content: safe center;
align-content: unsafe center;

/* グローバル値 */
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;

normal

各アイテムは align-content の値が設定されていないかのように、既定の位置に寄せて配置されます。

start

各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

center

各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。

end

各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

flex-start

各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。

flex-end

各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。

baseline, first baseline, last baseline

first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。

ベースラインは、ほとんどの文字がその上に「配置」される線で、ディセンダーがその下に伸びる線です。

first baseline の代替配置は startlast baseline の代替配置は end です。

space-between

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。

space-around

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。

space-evenly

各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。

stretch

各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。

safe

配置キーワードと共に使用します。選択されたキーワードによって、アイテムが配置コンテナーをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置されます。

unsafe

配置キーワードと共に使用します。アイテムの寸法と配置コンテナーとの関係、あふれることによってデータの損失が発生するかどうかにかかわらず、指定された値を尊重します。

メモ: <content-distribution> 値 (space-between, space-around, space-evenly, stretch) はブロックレイアウトでは効果がありません。そのブロック内のすべてのコンテンツが単一の配置対象物として扱われるためです。

公式定義

初期値normal
適用対象Block-containers, multi-column containers, flex containers
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

align-content = 
normal |
<baseline-position> |
<content-distribution> |
<overflow-position>? <content-position>

<baseline-position> =
[ first | last ]? &&
baseline

<content-distribution> =
space-between |
space-around |
space-evenly |
stretch

<overflow-position> =
unsafe |
safe

<content-position> =
center |
start |
end |
flex-start |
flex-end

さまざまな align-content 値の効果

この例では 3 つの異なる display プロパティ値、つまり flex, grid, block を切り替えることができます。また、 align-content の値も切り替えることができます。

HTML

html
<section>
  <div class="olive">Olive</div>
  <div class="coral">Coral</div>
  <div class="deepskyblue">Deep<br />sky<br />blue</div>
  <div class="orchid">Orchid</div>
  <div class="slateblue">Slateblue</div>
  <div class="maroon">Maroon</div>
</section>

CSS

css
section {
  border: solid 1.5px tomato;
  height: 300px;
  width: 300px;
  flex-wrap: wrap; /* フレックスでのみ使用 */
  gap: 0.2rem; /* ブロックでは使われない */
}
.olive {
  background-color: olive;
}
.coral {
  background-color: coral;
}
.deepskyblue {
  background-color: deepskyblue;
}
.orchid {
  background-color: orchid;
}
.slateblue {
  background-color: slateblue;
  color: white;
}
.maroon {
  background-color: maroon;
  color: white;
}

結果

display の値と align-content の値を変更してみましょう。

ブロックレイアウトでは、子要素は単一の要素として扱われるため、 space-betweenspace-aroundspace-evenly の動作が異なります。

仕様書

Specification
CSS Box Alignment Module Level 3
# align-justify-content
CSS Flexible Box Layout Module Level 1
# align-content-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
align-content
Supported in Block Layout
Supported in Flex Layout
flex_context.baseline
first baseline
last baseline
safe and unsafe
flex_context.space-evenly
start and end
flex_context.stretch
Supported in Grid Layout
Supported in Multi-column Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報