Solution to the left alignment of the last line of space between in flex layout

Time:2021-1-22

First look at the code and effect


<style>
        .main {
            outline: 1px solid;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .main>div {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: lightgreen;
        }
        
    </style>
    <body>
        <div class="main">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>

You can see that the last div is not in the middle, but at the end

Because we set the justify content to space between, which means the two sides are pasted

At this time, we can set a pseudo element for the outermost div with the same width as the inner Div

You only need two lines of CSS


.main:after {
    content: "";
    width: 100px;
}

It’s time to see the effect

In fact, the principle is that the last pseudo element pushed him over

Even if there are 9, it doesn’t affect, because his height is 0. See the figure below

So far, this article about how to solve the problem of left alignment of the last line of flex layout space between is introduced. For more information about left alignment of flex layout space between, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!