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