Flexアイテム全体の主軸に沿った位置または余白を制御
Flexアイテム全体の主軸に沿った位置または余白を制御するには、justify-contentプロパティ（旧仕様ではbox-packプロパティまたは、flex-packプロパティ）を使用します。
justify-contentプロパティを使用することで、Flexアイテムの均等配置や中央寄せ、右寄せなどが可能になります。
構文
justify-content:配置方法;指定可能な値
| 値 | 値（旧仕様） | 説明 |
|---|---|---|
| space-between | justify | 等幅（先端・終端には余白なし） |
| space-around | distribute（flex-packのみ） | 等幅（先端・終端にも余白） |
| flex-start | start | 先端（初期値） |
| flex-end | end | 終端 |
| center | center | 中央 |
サンプルコード
item 1
item 2
item 3
item 4
item 5
CSS
div.flex-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-flex-pack:center;
-moz-flex-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
-moz-justify-content:center;
justify-content:center;
}また、marginプロパティをautoにすることでも自動的に余白の調整を行うことができます。
このmarginプロパティの指定は、Flexアイテム自身に指定を行います。
item 1
item 2
item 3
item 4
item 5
CSS
div.flex-container {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-flex-pack:center;
-moz-flex-pack:center;
-ms-flex-pack:center;
-webkit-justify-content:center;
-moz-justify-content:center;
justify-content:center;
}
div.flex-item:nth-child(1) {
margin-right:auto; /* directionがrowの場合 */
margin-bottom:auto; /* directionがcolumnの場合 */
}シミュレーション
- 1
- 2
- 3
- 4
- 5
- 6
- 7