N methods for left alignment of the last line list in CSS flex layout (summary)

Time:2021-1-11

quoteAn article by Zhang XinxuShare with you, if you want to modify, enter the link point to the corresponding image to generate the link to enter, can be modified.

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

The first method uses margin to simulate the gap

such as


.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 determines the margin according to the number of the last line

Because the number of each column is fixed, we can calculate the margin value of different number lists to ensure full left alignment.

For example, if there are four elements in each row and only three elements in the last row, and the margin right size of the last element is “list width + gap size”, then the last three elements can be perfectly left aligned.

Then, with the help of tree structure pseudo class number matching technology (the layout skills in this article “pseudo class matching list number to realize the CSS layout of wechat group Avatar” are realized with this technology), we can know how many elements are in the last line.

For example:

  • . list:last-child : nth child (4N – 1) describes the last line, either 3 elements or 7 elements
  • . list:last-child : nth child (4N – 2) describes the last line, either 2 elements or 6 elements
     

In this example, there are only four elements in a row, so we can have the following CSS settings:

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

The phenomena are as follows

Even if you delete it, it’s still a good style. I admire that

Method 3 if the width of the child element is not fixed

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

(1) The last margin right: Auto;

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

(2) Create pseudo elements and set flex:auto or flex:1

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    background-color: skyblue;
    margin: 10px;
}
/*Using 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 > // 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;
}

Here is the article about n methods (summary) of left alignment of the last line of CSS flex layout. For more information about left alignment of the last line of CSS flex layout, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!