N ways to align the last row of lists in CSS flex layout to the left (summary)

I would like to quote an article by Zhang Xinxu and share it with you. If you want to make any changes, please click on the link generated by the corresponding picture to make the changes.

Problem Description

//html
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>
//css
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

This situation is obviously different from what we want.

Fixed number of rows solution

Method 1: Use margin to simulate gaps

for example

.container {
    display: flex;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
.list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}

The style is as follows

Method 2: Determine margin based on the number of the last row

Since the number of columns is fixed, we can calculate the margin value for lists of different numbers to ensure complete left alignment.

For example, assuming there are 4 elements in each row, and the last row has only 3 elements, then if the margin-right size of the last element is "list width + gap size", then the last 3 elements can also be perfectly left-aligned.

Then, with the help of tree structure pseudo-class quantity matching technology (the layout technique in this article "Techniques for implementing WeChat group avatar CSS layout by matching the number of pseudo-class lists" is implemented with the help of this technology), we can know how many elements are in the last row.

For example:

• .list:last-child:nth-child(4n - 1) indicates that the last row has either 3 elements or 7 elements...
• .list:last-child:nth-child(4n - 2) indicates that the last row has either 2 elements or 6 elements...
  

In this example, there are 4 elements in one row, so we can have the following CSS settings:

.container {
    display: flex;
    /* Justify both ends*/
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* If the last row is 3 elements */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* If the last row is 2 elements */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

The phenomena presented are as follows

Even if you delete it, the style remains intact. I admire this.

Method 3: If the width of the child element is not fixed

This is difficult to deal with, but there are still solutions, and the program is becoming more and more interesting.
At this time, it is more difficult to use the method above, because the width is not fixed and the margin value cannot be calculated based on the width.

(1) The last item, margin-right: auto;

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* The last item margin-right:auto */
.list:last-child {
    margin-right: auto;
} 

(2) Create a pseudo-element and set flex:auto or flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/* Use pseudo elements to assist left alignment*/
.container::after {
    content: '';
    flex: auto; /* or flex: 1 */
} 

4. If the number of rows and columns is not fixed

//HTML code:
<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <i></i><i></i><i></i><i></i><i></i><i></i>//One less than div!
</div>
//CSS code:
.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-right: -10px;
}
.list {
    width: 100px; height:100px;
    background-color: skyblue;
    margin: 15px 10px 0 0;
}
.container > i {
    width: 100px;
    margin-right: 10px;
} 

This concludes this article about N ways to make the last line of a list in a CSS flex layout left-aligned (summary). For more information about how to make the last line of a list in a CSS flex layout left-aligned, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!