CSS3|Html5 网站首页 CSS3|Html5

flex布局justify-content:space-between与flex-flow:row wrap换行问题

发布时间：2020-02-04 19:50:25编辑：雪饮阅读（）

我们知道css3中的flex布局中使用justify-content:space-between;属性可实现块级别元素的两端对齐并且多个块元素之间自动有间距，如下图所示：

然而该仅仅是该特性想要实现多行布局就有问题了，它会随着子元素增多而不断的缩短间距而不是我们所想要的当子元素容不下时候自动换行，要想实现子元素容不下时自动换行，则还要结合flex-flow:row wrap;那么下面的效果就理所当然的实现了

然而问题还没有完，当你第二行的元素少于整行元素个数时，它呈现这样的效果

这个问题目前没有找到比较官方的解决方案，只有一个奇技淫巧

是的就是这样，给父容器一个伪类，伪类的宽度是你父容器宽度除以完整整行元素个数，其它就如图中所示一样即可

关键字词：flex,justify-content,space-between,flex-flow,row,wrap