css3 flex layout justify-content:space-between the last line is aligned to the left

When using justify-content:space-between layout, using justify-self: start; for the last row of elements has no effect. I checked and found that CSS3 flexbox is not supported yet.

So how do you make the last line left-aligned?

Several existing solutions

• Use tag elements to complete missing items
• Using grid
• Using Pseudo-Classes

In the case of pseudo-classes, if the last element is full, there will be a placeholder, the grid will have compatibility issues, and we don’t want to add new tags.

Left alignment for each row with a fixed number of columns

Since the number of columns is fixed, we can calculate margin-right value of the last element to ensure complete left alignment.

Assuming that each row has only three columns of elements, margin-right processing is required only when the last element is in the second column (i.e. li:last-child:nth-child(3n + 2) ), and the distance is the width of one element + the gap width.

Assuming the element width is $width , the distance required for the above situation is: (100% - 3 * $width) / 2 + $width => (100% - $width) / 2

.list1 li:last-child:nth-child(3n + 2) {
  margin-right: calc((100% - $width) / 2);
} 

Similarly, in the case of one row and four columns, we need to handle two cases: the last element is in the second column and the last element is in the third column.

.list2 li:last-child:nth-child(4n + 2) {
  margin-right: calc((100% - $width) / 3 * 2);
}
.list2 li:last-child:nth-child(4n + 3) {
  margin-right: calc((100% - $width) / 3 * 1);
} 

Click here to view the demo code

Left alignment for each row with an unfixed number of columns

I think the best solution is to use grid. There are a lot of them on the Internet, so I won’t discuss them here.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.