マージンを持つ親要素によるフレックス要素の整列

プロパティjustify-contentの値space-aroundは、 最初と最後のフレックス要素に親要素の端からのマージンを 設定します。

一見すると、要素間の距離と、 両端の要素と親要素との間の距離が 等しくなるように思えますが、そうではありません。 要素間の距離は、親要素と端の要素との間の距離の 2倍になります。

例を見てみましょう：

css.parent {
  display: flex;
  justify-content: space-around;
}

コード実行結果：