例
柔軟のアイテムの周りにいくつかのスペースを作る<div>要素：
div
{
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
}
»それを自分で試してみてください 定義と使用法
項目は、メイン軸上のすべての利用可能なスペースを使用しないときに正当化-contentプロパティは、フレキシブルコンテナのアイテムを揃え(horizontally) 。
ヒント：使用ALIGN-項目のクロス軸上のアイテムを揃えるために、プロパティを(vertically) 。
| デフォルト値： | flex-start |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.justifyContent="space-between" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は-webkit-に続くかの接頭辞で働いていた最初のバージョンを指定します-moz-。
| プロパティ | |||||
|---|---|---|---|---|---|
| justify-content | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSSの構文
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| flex-start | デフォルト値。 アイテムは、コンテナの先頭に配置されています | それを再生します» |
| flex-end | アイテムは、容器の端部に配置されています | それを再生します» |
| center | アイテムは、容器の中央に位置しています | それを再生します» |
| space-between | アイテムは、ライン間のスペースで配置されています | それを再生します» |
| space-around | アイテムは間、および行の後、前にスペースが配置されています | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス： align-content property
CSSリファレンス： align-items property
CSSリファレンス： align-self property
HTML DOMリファレンス： justifyContent property