弹性盒布局之从左往右，空间不够换行继续从左往右（从左往右，从上往下）

本文记录一个css小技巧，不难，不过可能自己一时间想不到

问题描述

我们有这样的需求，大容器中有很多的盒子，从左往右排列，空间不够的话，然后换行，继续从左往右排列，如下效果图

看到这样的需求，我们第一时间想到的就是弹性盒布局，给大容器开启弹性盒、允许换行，两侧分布，于是会写下如下代码：

display: flex;
flex-wrap: wrap;
justify-content: space-between;

如果是正好9个项，那这种写法没有问题，如果是8个项，最后一行的7和8就会两侧分布了，如下图：

这种效果肯定不行啊，那怎么办呢？

解决方案一 使用真实DOM进行填充，然后再隐藏这个DOM

• 我们再创建一个dom元素项，作为最后一个9
• 然后把第9项的高度置为0，只保留宽度
• 或者再加点透明度为0障眼法使其看不到即可

代码如下（复制粘贴使用）：

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    
    

这样就实现了，本文中的第一个效果图

解决方案二 使用伪元素在最后位置进行填充

创建dom，渲染dom有些耗费性能（实际上肉眼看不出区别的），那我们就不创建dom呗，直接使用伪元素模拟一个真实的dom，思路基本一致的，于是，我们就有了以下“优化”代码

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
    

拓展栅格布局也是一种思路

另外也可以使用栅格布局的方式进行尝试

栅格布局非常强大哦！！！

拓展思路代码

    
    
    
    
    



    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8