CSS では、space-around は justify-content プロパティの値です。
justify-content プロパティは、ブラウザがコンテナ内の Flex アイテム間に空白を割り当てる方法を定義します。
space-around の値は、子がコンテナ内に等間隔で均等に配置されることを示します。同時に、最初の子の前後と最後の子の後にも半分のスペースが空きます。
例:
.container {
display: flex;
justify-content: space-around;
}
space-around を使用すると、子は 2 つごとに等しい間隔で均等に分散され、最初と最後の子はコンテナ境界から同じ間隔になります。
space-around 値と他の justify-content 値の違い:
-
space-between: 両側にスペースはなく、サブアイテムは等間隔に配置されます。
-
均等な間隔: 境界間隔が含まれ、すべての間隔が等しい
-
space-around: 境界間隔が含まれますが、境界間隔は子の間隔の半分のみです。
つまり、簡単に言うと、space-around は Flex レイアウトで子を均等に分散し、最初と最後の子に対応するスペースを残すことができます。これにより、多くのシナリオで非常に優れた視覚効果を実現できます。頻繁に使用してください~