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

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

構文

/* 基本的な位置による配 */
/* 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
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 29
完全対応 29
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 28
完全対応 28
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
IE 完全対応 11Opera 完全対応 12.1Safari 完全対応 9
完全対応 9
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 29
完全対応 29
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 28
完全対応 28
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
Opera Android 完全対応 12.1Safari iOS 完全対応 9.2
完全対応 9.2
完全対応 7.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
space-evenlyChrome 完全対応 60Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 47Safari 完全対応 11WebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 11Samsung Internet Android 未対応 なし
start and endChrome 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari 未対応 なしWebView Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Chrome Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 あり
left and rightChrome 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge 未対応 なしFirefox 未対応 52 — 60
補足
未対応 52 — 60
補足
補足 align-content no longer accepts the left and right values
部分対応 一部
補足
補足 This value is recognized, but has no effect.
IE 未対応 なしOpera 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari ? WebView Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Chrome Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Edge Mobile 未対応 なしFirefox Android 未対応 52 — 60
補足
未対応 52 — 60
補足
補足 align-content no longer accepts the left and right values
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Opera Android 部分対応 一部
補足
部分対応 一部
補足
補足 This value is recognized, but has no effect.
Safari iOS ? Samsung Internet Android 完全対応 あり
baselineChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 44Safari ? WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 ありOpera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0
first baseline and last baselineChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 未対応 なしSafari iOS ? Samsung Internet Android 未対応 なし
stretchChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 完全対応 9WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 9Samsung Internet Android 完全対応 7.0
safe and unsafeChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

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