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

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

代码和效果如下：

    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
        
    

image.png

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

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

image.png

---

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