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

东明兄 • 2018-05-15 • 开发笔记 • 9222 阅读
chat

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

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


解决方法：

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

我们把末尾这四个 多余的项目变得不可见（将高度设为0），就解决了问题！

效果如下：

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

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

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/461/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
flex布局 最后一行无法左对齐的解决方案
解决flex布局最后一行左对齐问题
<<上一篇
下一篇>>
chat