レイアウト
justify-content
justify-content は、フレックスボックスやグリッドの中で、項目を主軸（並べる向き）のどこに寄せるか、余った空きをどう配るかを指定します。
構文
normal | <content-distribution>
| <overflow-position>? [ <content-position> | left | right ]プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
justify-content: space-between;
}コントロール
justify-contentspace-between
safe / unsafe項目が箱からはみ出すときだけ効きます（このプレビューでは、はみ出しません）
1234
解説
値の書き方
normal：初期値です。フレックスボックスではflex-startと同じです。flex-start・flex-end：並べ始める端・並べ終わる端に寄せます。flex-directionがrow-reverseなどのときは、端も入れ替わります。center：真ん中に寄せます。space-between：最初と最後の項目を両端に置き、残りの空きを項目の間に等しく配ります。space-around：各項目の両側に同じだけ空けます。端の空きは、項目の間の半分になります。space-evenly：両端も含めて、すべての空きを等しくします。start・end：文字の向きで決まる始まり・終わりの端に寄せます。-reverseでも入れ替わりません。left・right：左・右に寄せます。並べる向きが縦（column）のときはstartと同じです。stretch：フレックスボックスではflex-startと同じです。グリッドでは、大きさがautoの列を広げて箱を埋めます。項目そのものを広げたいときは、項目にflex-growを書きます。
このページのプレビューは、補助の宣言で display: flex にして、幅 3em の項目を 4 つ並べています。グリッドでは、列の合計が箱より狭いときに、列をまとめてどこに寄せるかを決めます。
safe と unsafe
位置のキーワードの前に safe を付けると、項目が箱からはみ出すときは start に寄せて、はみ出した分がスクロールしても見えない側（左や上）に隠れないようにします。unsafe は、はみ出しても指定どおりの位置に置きます。どちらも付けないときは、今のブラウザでは unsafe と同じ動きです。このページのプレビューでは項目がはみ出さないので、付けても見た目は変わりません。