什么是space-around

在CSS中,space-around是justify-content属性的一个值。

justify-content属性定义了浏览器如何分配容器中Flex子项之间的空白间隙。

space-around的值表示子项会均匀地分布在容器里,子项之间的间隔相等。同时,第一个子项前和最后一个子项后也会有一半的间隔空间。

示例:

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

使用space-around后,子项会均匀分布,每两个子项之间的间隔相等,第一个和最后一个子项与容器边界也会有相同的间距。

space-around与其他justify-content值的区别:

• space-between:两边没有间隔,子项间隔相等

• space-evenly:包含边界间隔,所有间隔全部相等

• space-around:包含边界间隔,但是边界间隔只有子项间隔的一半

所以简单来说,space-around在Flex布局中能够使子项均匀分布,并给首尾子项留出相应的空间。这在许多场景下能够达到很好的视觉效果,经常hi使用这个哈~