今天在项目使用flex布局做一个列表,在列表父级元素 使用了 justify-content: space-between; 这样让列表实现了 两端对齐,列表项目的左右间距相等,效果如下:
这样做会发现最后一行如果列数无法与上面行的列数一致的话,,会很难看, justify-content: space-between的作用是把每一行剩余的空间等分给 项目之间的间距,最后一行 由于只有三个项目,所以项目间的间距比别的大。以前也有遇到过几次这样的问题,也没时间琢磨,就没有使用flex布局。。。
解决方法:
根据列数在末尾添加几个空的项目,比如有4列,我们就在后面添加四个多余项目,效果如下:
我们把末尾这四个 多余的项目变得不可见(将高度设为0),就解决了问题!
效果如下:
201910月更新:
以上方法会增加无用元素,不推荐
参考 张旭鑫 老师的文章:https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里
上一篇: Es6 Promise 知识点参考
下一篇: 实现继承的圣杯模式
😮
动态数据呢
一样的啊 有多少列 就在后面追加 几个 假数据就好了嘛 😐