例
フレックスコンテナの中心に向かってパックライン：
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
»それを自分で試してみてください 定義と使用法
ALIGN-contentプロパティは、フレックスラッププロパティの動作を変更します。 アイテムを揃えるために似ていますが、代わりにフレックスアイテムを揃えるのではなく、フレックスラインを揃えます。
ヒント：使用して正当化するコンテンツメイン軸上のアイテムを揃えるために、プロパティを(horizontally) 。
注：任意の効果を持つために、このプロパティのアイテムの複数の行が存在する必要があります。
| デフォルト値： | stretch |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.alignContent="center" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-に続く数字は接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
CSSの構文
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| stretch | デフォルト値。 行は、残りのスペースを取るためにストレッチ | それを再生します» |
| center | 行はフレックスコンテナの中心に向かってパックされています | それを再生します» |
| flex-start | 行はフレックスコンテナの開始に向けてパックされています | それを再生します» |
| flex-end | 行はフレックスコンテナの端部に向かってパックされています | それを再生します» |
| space-between | 行が均等にフレックスコンテナに分布しています | それを再生します» |
| space-around | 行は均等にどちらかの端にハーフサイズのスペースで、フレックスコンテナに分布しています | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス： align-items property
CSSリファレンス： align-self property
CSSリファレンス： justify-content property
HTML DOMリファレンス： alignContent property