flexbox/justify-content

ドキュメント：justify-content - CSS: カスケーディングスタイルシート MDN

フレックスアイテムの水平方向のレイアウト指定をするプロパティ。開始位置と均等割付けのいずれかが指定できる。

justify-content: normal

初期値。flex-direction: row-reverseが指定された場合は右よせになる。

<div style="display: flex; justify-content: normal">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: start

左よせになる。flex-direction: columnが指定された場合は上よせになる。flex-direction: row-reverseが指定されたとしても左よせになる。

<div style="display: flex; justify-content: start">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: end

右よせになる。flex-direction: columnが指定された場合は下よせになる。flex-direction: rowが指定されたとしても右よせになる。

<div style="display: flex; justify-content: end">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: flex-start、justify-content: flex-end

flex-directionプロパティの指定によって挙動が変わる。justify-content: flex-startはjustify-content: normalと同じ挙動になり、justify-content: flex-endは反対の挙動になる。

TODO: 説明を読む限り、gridでは効果がなくflexboxの時にしか効かないっぽいので要確認

<div style="display: flex; justify-content: flex-end; flex-direction: row-reverse">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: center

中央揃えになる。

<div style="display: flex; justify-content: center">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: left、justify-content: right

justify-content: leftは左よせ、justify-content: rightは右よせになる。flex-direction: columnの場合は効果がないっぽい。

<div style="display: flex; justify-content: right">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: space-between

フレックスアイテムを均等に配置する。最初のアイテムは先頭に、最後のアイテムは末尾によせられる。

<div style="display: flex; justify-content: space-between">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: space-around

フレックスアイテムを均等に配置する。先頭と末尾はアイテム間の間隔の半分の間隔がつく。

<div style="display: flex; justify-content: space-around">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: space-evenly

フレックスアイテムを均等に配置する。先頭と末尾と各アイテム間に同じように間隔がつく。

<div style="display: flex; justify-content: space-evenly">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

justify-content: stretch

flexboxでは効果がないらしい。

justify-content: safe centerなど

centerなどの配置キーワードと組み合わせてsafe centerのように指定する。 コンテナからはみ出した場合に先頭位置をコンテナ内に収めて末尾だけはみ出すようにしたりするらしいが、どうやらFirefox以外では実装されていないらしい。