解决flex布局space-between最后一行没有左对齐的问题

在遇到类似九宫格的排列布局时，我首先想到的是用flex布局的justify-content属性做操作，但是会出现一个问题————就是最后一行为两个元素的时候会出现分开排列的情况，这时候可以用伪元素解决这个问题

代码和效果如下：

<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>

image.png

加上如下CSS代码，意思是留下一个宽度一样的占位盒子

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

image.png

就算是9个格子也不会出现BUG 因为没有设置高度即高度为0

解决flex布局space-between最后一行没有左对齐的问题

推荐阅读更多精彩内容