CSS3 flex layout justify content: space between last line left aligned

Time:2020-3-13

in usejustify-content:space-betweenWhen layout, use thejustify-self: start;No effect. Check that the CSS3 flexbox is not supported.

So how to achieve the left alignment of the last line?

Several existing schemes

  • Use tag elements to fill in missing items
  • Using grid
  • Using pseudo class

In the case of pseudo class, if the last element is full, there will be occupation, grid will have compatibility problems, and you do not want to add a new tag.

Left alignment scheme with fixed number of columns in each row

Since the number of each column is fixed, we can calculate themargin-rightValues ensure full left alignment.

Assuming that each row has only three columns of elements, then when the last element is the second column (i.eli:last-child:nth-child(3n + 2))Only in the case ofmargin-rightProcessing, the distance is the width of an element + the width of the gap.

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

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

CSS3 flex layout justify content: space between last line left aligned

Similarly, in the case of one row and four columns, we need to deal with two situations, the last element in the second column and the last element 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);
}

CSS3 flex layout justify content: space between last line left aligned

Click here to view demo display code

Realization of left alignment when the number of columns in each row is not fixed

I think the best solution is to use grid. If there is a lot of Internet, there will be no discussion.

Recommended Today

Order by sorting optimization

In daily business development, order by is indispensable. But to write efficient sorting SQL, we need to spend some energy and time to understand the underlying principle of sorting, so as to find a good strategy to optimize the sorting. How to sort Index (index sort, best performance) Use index fields to sort as much […]