What is space-around

In CSS, space-around is a value of the justify-content property.

The justify-content property defines how the browser allocates white space between Flex items in a container.

The value of space-around indicates that the children will be evenly distributed in the container, with equal intervals between children. At the same time, there will also be half the space before the first child and after the last child.

Example:

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

After using space-around, the children will be evenly distributed, with equal spacing between every two children, and the first and last children will have the same spacing from the container boundary.

The difference between space-around and other justify-content values:

• space-between: There is no space on both sides, and the sub-items are equally spaced

• space-evenly: contains boundary intervals, all intervals are equal

• space-around: includes boundary spacing, but the boundary spacing is only half of the child spacing

So to put it simply, space-around can evenly distribute children in Flex layout and leave corresponding space for the first and last children. This can achieve very good visual effects in many scenarios. Use this often~