CSS|CSS flex 一行 4 列布局遇到的问题
开始……
前情提要：列表内容是 1 行 4 列的布局方式。
1. 希望效果（下图所示）
然后我就用了 flex 布局
【CSS|CSS flex 一行 4 列布局遇到的问题】
display: flex
justify-content: space-between复制代码2. 遇到的问题及原因
因为，列表内容根据 数据 展示，所以 数据 当然不会正好是 4 的倍数。
所以，就有了下图的 2 种布局效果：
3. 解决方法
在列表的末尾添加额外的两个 li ：
// html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
// css
.flex-box {...}
li {...}
.after-add {
height: 0;
padding: 0;
margin: 0 之前li设定值 0 之前li设定值;
}复制代码……结束
转载于:https://juejin.im/post/5c0282f4e51d456ac27b458a
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 3.css浮动
- 《正念的奇迹》（作者（一行禅师）读后分享之三）
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- CSS兼容性笔记
- 微信小程序____CSS篇之定位（position）及浮动（float）
- 18，页面优化
- 第一行代码（十）