flex布局 最后一行无法左对齐的解决方案

东明兄 2018-05-15
3条评论 8,748 次浏览
东明兄 2018-05-153条评论 8,748 次浏览

今天在项目使用flex布局做一个列表,在列表父级元素 使用了 justify-content: space-between; 这样让列表实现了 两端对齐,列表项目的左右间距相等,效果如下:

这样做会发现最后一行如果列数无法与上面行的列数一致的话,,会很难看, justify-content: space-between的作用是把每一行剩余的空间等分给 项目之间的间距,最后一行  由于只有三个项目,所以项目间的间距比别的大。以前也有遇到过几次这样的问题,也没时间琢磨,就没有使用flex布局。。。


解决方法:

根据列数在末尾添加几个空的项目,比如有4列,我们就在后面添加四个多余项目,效果如下:

我们把末尾这四个 多余的项目变得不可见(将高度设为0),就解决了问题!

效果如下:

201910月更新:
以上方法会增加无用元素,不推荐

参考 张旭鑫 老师的文章:https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

flex布局 最后一行无法左对齐的解决方案” 有 3 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注