CSSalign-content プロパティは、ブラウザーがフレックスボックスコンテナーの交差軸方向に中身のアイテムの間や周囲に間隔を配置する方法を定義します。

単一行のフレックスボックスでは、このプロパティは効果がありません。

構文

/* 基本的な位置による配 */
/* align-content は left 及び right の値を取りません */
align-content: center;     /* アイテムを中央に寄せる */
align-content: start;      /* アイテムを先頭に寄せる */
align-content: end;        /* アイテムを末尾に寄せる */
align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */

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

/* ベースラインの配置 */ 
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: unset;

start
各アイテムは、交差軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、交差軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
各アイテムは、フレックスコンテナーに依存して、交差軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
各アイテムは、フレックスコンテナーに依存して、交差軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
center
各アイテムは、交差軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
normal
各アイテムは align-content の値が設定されていないかのように、既定の位置に寄せて配置されます。
baseline
first baseline

last baseline
the baseline is the line upon which most letters "sit" and below which descenders extend.
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
space-between
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは交差軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
space-around
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
space-evenly
各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
stretch
各アイテムの交差軸方向の寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、交差軸方向の寸法の合計が配置コンテナーを満たすようになります。
safe
アイテムの寸法が配置コンテナーを超えるとき、アイテムは配置モードが start であったかのように配置されます。
unsafe
アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。

形式文法

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

where
<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

CSS

#container {
  height:200px;
  width: 240px;
  align-content: center; /* Can be changed in the live sample */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
align-content の定義
草案 [ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。
CSS Flexible Box Layout Module
align-content の定義
勧告候補 初回定義
初期値normal
適用対象multi-line flex containers
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

フレックスレイアウトでの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

29

21 -webkit-

12

12 -webkit-

28

49 -webkit-

48 -webkit- 1

1112.1

9

6.1 -webkit-

space-evenly なし なし52 なし なし なし
start and end あり2 なし あり なし あり2 ?
left and right あり2 なし

52 — 603

あり2

なし あり2 ?
baseline57 なし あり なし44 ?
first baseline and last baseline なし なし52 なし なし ?
stretch57 なし52 なし44 ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

29

21 -webkit-

29

21 -webkit-

あり

あり -webkit-

28

49 -webkit-

48 -webkit- 1

12.1

9.2

7.1 -webkit-

あり
space-evenly なし なし なし52 なし なし なし
start and end あり2 あり2 なし なし あり2 ? あり
left and right あり2 あり2 なし

52 — 603

あり2

あり2 ? あり
baseline5757 なし あり44 ?7.0
first baseline and last baseline なし なし なし52 なし ? なし
stretch5757 なし5244 ?7.0

1. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. This value is recognized, but has no effect.

3. align-content no longer accepts the left and right values

グリッドレイアウトでの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応571652 ?4410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5752 あり524410.36.2

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, wikrsh, fscholz, Sebastianz, ethertank
最終更新者: mfuji09,