Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

align-content

概要

CSS align-content プロパティは、flex コンテナの cross axis 上に余分なスペースがある場合に、flex コンテナ内のラインの配置法を示します。。

単一ラインの flexible box に対して、このプロパティは効果がありません。

初期値stretch
適用対象multi-line flex containers
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* cross-axis の起点からラインを詰める */
align-content: flex-start;

/* cross-axis の終端にラインを詰める */
align-content: flex-end;

/* cross-axis の中央にラインを詰める */
align-content: center;

/* cross-axis の全体に渡って分配する */
align-content: space-between;

/* 余白を均等にして、cross-axis に渡って配分する */
align-content: space-around;

/* cross-axis 全体を占めるようにラインを拡張する */
align-content: stretch;

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

flex-start
ラインは cross-start を起点に詰められます。最初のラインの cross-start の端と flex コンテナの cross-start の端が揃えられます。後続のラインは直前のラインに寄せられます。
flex-end
ラインは cross-end を起点に詰められます。最後のラインの cross-end と flex コンテナの cross-end が揃えられます。先行するラインは直後のラインに寄せられます。
center
ラインは flex コンテナの中央に向かって詰められます。各ラインは互いに寄せられ、flex コンテナの中央に配置されます。flex コンテナの cross-start から最初のラインまでの余白と、flex コンテナの cross-end から最後のラインまでの余白は同じです。
space-between
ラインは flex コンテナ内で均等に配置されます。隣接するアイテム間の余白が同じになるように、余白が置かれます。flex コンテナの cross-start および cross-end の端に、それぞれ最初のラインおよび最後のラインが寄せられます。
space-around
隣接するライン間の余白が同じになるように、ラインが均等に配置されます。最初のラインの前および最後のラインの後ろに置かれる余白のサイズは、隣接するライン間の余白の半分に等しくなります。
stretch
残りの余白を使用するようにラインを拡張します。余白は、すべてのラインへ均等に分配します。

形式構文

flex-start | flex-end | center | space-between | space-around | stretch

HTML:

<div id="container">
  <p>align-content: flex-start</p>
  <div id="flex-start">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: center</p>
  <div id="center">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: flex-end</p>
  <div id="flex-end">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-between</p>
  <div id="space-between">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: space-around</p>
  <div id="space-around">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>align-content: stretch</p>
  <div id="stretch">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS:

#container > div {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
}

#container > div > div {
  margin: 2px;
  width: 30px;
  min-height: 30px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

#flex-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#center {
  -webkit-align-content: center;
  align-content: center;
}

#flex-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

#space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}

#space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}

#stretch {
  -webkit-align-content: stretch;
  align-content: stretch;
}

結果は以下のとおりです:

仕様書

仕様書 状況 備考
CSS Flexible Box Layout Module
The definition of 'align-content' in that specification.
Last Call Working Draft 最初の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 21.0-webkit 28.0 未サポート 12.10 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? 28.0 未サポート 12.10 未サポート

関連情報

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

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