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 layout development.

The context-content property is a common one in Flex layouts, and defines the alignment of child elements on the main axis. It has a flex – start | flex – end | center | space – between | space – around | space – evenly and other attributes.

However, the author has found in a development run that the Space-instituted instituted will have compatibility issues in use, and tested it on the iPhone 5S with justice-content: The child elements in a space-instituted container are not evenly distributed along the main axis as might be expected, but are squeezed out to the left.

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

Can I use space-instituted? It turns out that the space instituted does have a relatively small range of support.

The space-instituted property on MDN is:

Flex entries are evenly distributed along the main axis in the specified alignment container. The spacing between adjacent Flex entries, the spacing from the beginning of the spindle to the first flex entry, and the spacing from the end of the spindle to the last flex entry are all exactly the same.

To solve this problem, the author thinks of two ways:

usingflex-grow

Flex-grow specifies how the remaining space of the container should be allocated to child elements.

Having all the children have flex-Grow: 1 property at the same time will divide the space of the container equally, thus achieving a “evenly distributed, equally spaced” effect.

.container { display: flex; .child: { flex: 1; }}Copy the code

usingspace-between

Another approach is to take advantage of a space-between, similar to a space-instituted property. The two properties are close, and space-between has few compatibility problems.

The difference is that under the space-between, each child element will have the same space on both sides, whereas under the space-between, the first element of each row will be aligned with the beginning of the line and the last element of each row will be aligned with the end of the line.

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

/ / space - evenly | - - - - - - | / / space - between son | | - - - -Copy the code

That is, a space-between will have two more gaps on each side than a space-between, where the first and last child elements will stick to the edge of the container.

To fill this gap, we can use two pseudo-elements to make the container set to space-between have seven child elements and thus have “six gaps” :

| pseudo - sub - son - - - - false |Copy the code

Code:

.container { display: flex; justify-content: space-between; &:before, &:after { content: ''; display: block; }}Copy the code