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

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!

<<:  Summary of several implementations of returning to the top in HTML pages

>>:  Building an image server with FastDFS under Linux

Recommend

CSS flexible layout FLEX, media query and mobile click event implementation

flex layout Definition: The element of Flex layou...

Implementation of Nginx domain name forwarding

Introduction to Nginx Nginx ("engine x"...

HTML table tag tutorial (17): table title vertical alignment attribute VALIGN

The table caption can be placed above or below th...

Detailed explanation of the difference between docker-compose ports and expose

There are two ways to expose container ports in d...

Records of using ssh commands on Windows 8

1. Open the virtual machine and git bash window a...

Summary of knowledge points about null in MySQL database

In the MySQL database, null is a common situation...

Analysis of two implementation methods for adding static routing in Linux

Command to add a route: 1.Route add route add -ne...

Is it necessary to give alt attribute to img image tag?

Do you add an alt attribute to the img image tag? ...

What is Makefile in Linux? How does it work?

Run and compile your programs more efficiently wi...

Installation tutorial of MySQL 5.7 green version under windows2008 64-bit system

Preface This article introduces the installation ...

Use image to submit the form instead of using button to submit the form

Copy code The code is as follows: <form method...

uniapp implements date and time picker

This article example shares the specific code of ...