A brief discussion on two methods to solve space-evenly compatibility issues

Since its launch in 2009, flex has been supported by almost all browsers. As a simple, responsive layout solution, flex brings a lot of convenience to our layout development.
The justify-content property is a very commonly used property in flex layout, which defines the alignment of child elements on the main axis. It has properties such flex-start | flex-end | center | space-between | space-around | space-evenly .

However, during a development, I discovered that space-evenly faces compatibility issues when used. When testing on an iPhone 5s, I found that the child elements in the container with justify-content: space-evenly set were not evenly distributed along the main axis as expected, but were squeezed to the left.

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

After checking Can I use space-evenly?, I found that the supported range of space-evenly is indeed relatively small.

The definition of the space-evenly property on MDN is:

Flex items are evenly distributed along the main axis within the specified alignment container. The spacing between adjacent flex items, the spacing from the start of the main axis to the first flex item, and the spacing from the end of the main axis to the last flex item are all exactly the same.

To solve this problem, I thought of two ways:

Using flex-grow

flex-grow specifies how the remaining space of the container should be distributed to child elements.
By setting the flex-grow: 1 attribute to all child elements, they will divide the container's space equally, thus achieving the effect of "even distribution and equal spacing".

.container {
  display: flex;
  .child: {
    flex: 1;
  }
}

Using space-between

Another way is to use space-between which is similar to the space-evenly property. These two properties are very close, and space-between will rarely encounter compatibility issues.

The difference is that under space-evenly, each child element has the same space on both sides, while under space-between, the first element of each line is aligned with the beginning of the line, and the last element of each line is aligned with the end of the line.

Assuming there are five child elements in a container, the difference between these two attributes can be simply expressed as:

// space-evenly
|--son--son--son--son--son--|

// space-between
|Zi--Zi--Zi--Zi--Zi|

That is to say, space-evenly will have two more gaps on both sides than space-between, while the first and last child elements of space-between are close to the edge of the container.

To fill this gap, we can use two pseudo-elements to allow the container to have seven child elements when set to space-between, which means there are "six gaps":

|偽--子--子--子--子--子--偽|

Code:

.container {
  display: flex;
  justify-content: space-between;

  &:before,
  &:after {
    content: '';
    display: block;
  }
}

This concludes this article on two methods to solve space-evenly compatibility issues. For more space-evenly compatibility content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. We hope that everyone will support 123WORDPRESS.COM in the future!