align-content

概要

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

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

他のプロパティや詳細情報については 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 の利用