| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {align-content: 値 } |
| 値 の形式 | flex-start，flex-end，center，space-between，space-around，stretch |
| 初 期 値 | stretch |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | 複数行フレキシブル・コンテナ |
| 継 承 | しない |
align-content プロパティ は，フレキシブル・コンテナ内の行ボックスの 副軸（cross-axis）方向の配置方法 を指定します。 これは，主軸（main axis）方向の配置方法を指定する justify-content プロパティ と対を成すものです。
このプロパティの指定は，単一行の場合は無効です。 従って， flex-wrap プロパティ の値が nowrap 以外のときに有効です。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| flex-start | フレキシブル・コンテナの開始位置で揃えます。 最初の行ボックスの副開始端（cross-start）をフレキシブル・コンテナの副開始端に合わせます。 それ以後の行も前の行に合わせて間隔を空けずに配置します。 |
| flex-end | フレキシブル・コンテナの終端位置で揃えます。 最後の行ボックスの副終了端（cross-end）をフレキシブル・コンテナの副終了端に合わせます。 それ以前の行も後の行に合わせて間隔を空けずに配置します。 |
| center | フレキシブル・コンテナの中央位置に揃えます。 すべての行を間隔を空けずに並べた上，副開始端 と 副終了端で行ボックスとの間に同じだけのスペースが空くように配置します。 |
| space-between | フレキシブル・コンテナ内に等間隔に行を並べます。 フレキシブル・コンテナ内に余白ができない場合には，flex-start を指定した場合と同じです。 それ以外では，最初の行ボックスの副開始端をフレキシブル・コンテナの副開始端に合わせ，また，最後の行ボックスの副終了端をフレキシブル・コンテナの副終了端に合わせます。 残りの行は，これらと等しい間隔が空くように順に配置します。 |
| space-around | フレキシブル・コンテナ内に最初の行の前と最後の行の後に半分の間隔を空けて行を等間隔に行を並べます。 フレキシブル・コンテナ内に余白ができない場合には，center を指定した場合と同じです。 隣り合う行の間隔が等しく最初の行の前と最後の行の後にその半分の間隔が空くように配置します。 |
| stretch | 行間の空きスペースを埋めるように行ボックスを拡張します。 フレキシブル・コンテナ内に余白ができない場合には，flex-start を指定した場合と同じです。 それ以外の場合は，空きスペースの間隔を各行に等分割して副軸方向サイズ（cross size）を増加します。 |
なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語 が定義され，用いられておりますので，これらについての知識は必須です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
.bc1 {background-color: green; }
.bc2 {background-color: maroon; }
.bc3 {background-color: blue; }
.bc4 {background-color: red; }
.bc5 {background-color: teal; }
.bc6 {background-color: fuchsia; }
div.fwrapp {
margin: 20px 10px;
width: 400px;
height: 200px;
display: flex;
flex-flow: row wrap;
background-color: #e0e0e0;
}
div.fwrapp div {
width: 150px;
height: 35px;
color: #ffffff;
font-size: 25px;
text-align: center;
padding-top: 10px;
}
div.align1 { align-content: flex-start; }
div.align2 { align-content: flex-end; }
div.align3 { align-content: center; }
div.align4 { align-content: space-between; }
div.align5 { align-content: space-around; }
div.align6 { align-content: stretch; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="fwrapp align1"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> <div class="fwrapp align2"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> <div class="fwrapp align3"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> <div class="fwrapp align4"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> <div class="fwrapp align5"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> <div class="fwrapp align6"> <div class="bc1">1</div><div class="bc2">2</div> <div class="bc3">3</div><div class="bc4">4</div> <div class="bc5">5</div><div class="bc6">6</div> </div> |
| ブラウザー 表示例 |
|---|
1 2
3 4
5 6
↑ { align-content: flex-start; } の表示 ↑ 1 2
3 4
5 6
↑ { align-content: flex-end; } の表示 ↑ 1 2
3 4
5 6
↑ { align-content: center; } の表示 ↑ 1 2
3 4
5 6
↑ { align-content: space-between; } の表示 ↑ 1 2
3 4
5 6
↑ { align-content: space-around; } の表示 ↑ 1 2
3 4
5 6
↑ { align-content: stretch; } の表示 ↑ |