Two methods to solve the problem of space evenly compatibility

Time:2021-11-25

Flex has been supported by almost all browsers since its launch in 2009. As a simple and responsive layout scheme, flex brings a lot of convenience to our layout development.
The justify content attribute is a very common attribute in flex layout, which defines the alignment of child elements on the spindle. It has flex-start | flex-end | center | space-between | space-around | space-evenly And other properties.

However, in a development, the author found that space event will face compatibility problems in use. When testing on iPhone 5S, the author found that the sub elements in the container with just content: space event are not evenly distributed along the main axis as expected, but are crowded on the left.


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

seeCan I use space-evenly? It is found that the support range of space evenly is indeed relatively small.

On MDN for space evently attributedefinitionYes:

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

In order to solve this problem, the author thinks of two ways:

Using flex grow

Flex growth specifies how the remaining space of the container should be allocated to child elements.
Let all child elements have the flex growth: 1 attribute at the same time. They will divide the space of the container equally, which realizes the effect of “uniform 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 even attribute. The two properties are very close, and space between basically does not encounter compatibility problems.

The difference is that in space even, there is the same space on both sides of each child element, while in 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 that there are five child elements in a container, the difference between the two attributes can be simply expressed as:

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

// space-between
|Son -- son -- son -- son -- son|

In other words, space evenly will have two more gaps on both sides than space between, and 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 make the container have seven child elements when it is set to space between, which means that it has “six gaps”:

|Pseudo -- sub -- sub -- sub -- sub -- sub -- pseudo|

code:


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

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

This is the end of this article about two ways to solve the problem of space evenly compatibility. For more relevant space evenly compatibility content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Apache sqoop

Source: dark horse big data 1.png From the standpoint of Apache, data flow can be divided into data import and export: Import: data import. RDBMS—–>Hadoop Export: data export. Hadoop—->RDBMS 1.2 sqoop installation The prerequisite for installing sqoop is that you already have a Java and Hadoop environment. Latest stable version: 1.4.6 Download the sqoop installation […]