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 中央

サンプル

等幅(先端・終端には余白なし):space-between

item 1

item 2

item 3

item 4

item 5

CSS

等幅(先端・終端にも余白):space-around

item 1

item 2

item 3

item 4

item 5

CSS

先端(初期値):flex-start

item 1

item 2

item 3

item 4

item 5

CSS

終端:flex-end

item 1

item 2

item 3

item 4

item 5

CSS

中央:center

item 1

item 2

item 3

item 4

item 5

CSS

また、marginプロパティをautoにすることでも自動的に余白の調整を行うことができます。
このmarginプロパティの指定は、Flexアイテム自身に指定を行います。

item 1

item 2

item 3

item 4

item 5

CSS

CSS3逆引きリファレンス一覧へ戻る