CSS flex 一行 4 列布局遇到的问题

开始……

前情提要：列表内容是 1 行 4 列的布局方式。

1. 希望效果（下图所示）

然后我就用了 flex 布局

display: flex
justify-content: space-between复制代码

2. 遇到的问题及原因

因为，列表内容根据 数据 展示，所以 数据 当然不会正好是 4 的倍数。

所以，就有了下图的 2 种布局效果：

3. 解决方法

在列表的末尾添加额外的两个 li ：

// html
"flex-box">
    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
    
"after-add">
    
"after-add">
// css
.flex-box {...}
li {...}
.after-add {
    height: 0;
    padding: 0;
    margin: 0 之前li设定值 0 之前li设定值; 
}复制代码

……结束

转载于:https://juejin.im/post/5c0282f4e51d456ac27b458a