プロパティjustify-contentの値space-aroundは、 最初と最後のフレックス要素に親要素の端からのマージンを 設定します。
justify-content
space-around
一見すると、要素間の距離と、 両端の要素と親要素との間の距離が 等しくなるように思えますが、そうではありません。 要素間の距離は、親要素と端の要素との間の距離の 2倍になります。
2
例を見てみましょう:
.parent { display: flex; justify-content: space-around; }
コード実行結果:
次の見本に従ってページを再現してください: