CSS中怎么实现多行多列布局

tangjin

作者

本篇文章为大家展示了CSS中怎么实现多行多列布局，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

方案一：标签补位我们都知道，之所以对不齐是因为最后一行的子项目没有达到4个，space-between的对齐方式，自然会把中间空出来。既然如此，何不直接补位，让元素排满4个。

<!--样式--><style>.list{display:flex;justify-content:space-between;flex-wrap:wrap;}.item{/*flex:0024%该属性等价于flex:none;width:24%*/flex:0024%;height:100px;background-color:aqua;margin-bottom:10px;}.item-fill{flex:0024%;height:0;}/*消除最后一行多余边距*/.list.item:nth-last-child(-n+4){margin-bottom:0;}</style><!--html--><divclass="list"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item-fill"></div><divclass="item-fill"></div><divclass="item-fill"></div></div>

效果如下：

如果子元素个数不是4个怎么办？我们细心观察，不难发现，最后一行的最小值是1个，那么我们只需要补位n-1个即可。如果只有3个，也可以用伪元素::after去补最后一个位置。

方案二：计算剩余空间如果我们知道最后一行剩余空间的话，完全可以控制最后一个元素的边距或者缩放比例去占满剩下的空间，自然就能左对齐了。要做到这一点，首先得确定宽度和边距，宽度通常是已知的，我们只需要把边距确定下来，就能确认剩余空间。

接上面的的例子，假设一行有4个，每个占比24%，4个就是24% * 4 = 96% ，那么可以确定总边距是4%，由于一行有4个元素，而最后一个的右边距是多余的，那么可以确定单个的边距为 4% / 3 = 1.333% , 计算出来后就可以开始写代码了：

<!--css--><style>.list{display:flex;justify-content:space-between;flex-wrap:wrap;}.item{flex:0024%;height:100px;background-color:aqua;/*边距懒得算，css函数代替*/margin-right:calc(4%/3);margin-bottom:calc(4%/3);}/*去除每行尾的多余边距*/.item:nth-child(4n){margin-right:0;}/*使最后一个元素的边距填满剩余空间*/.item:last-child{margin-right:auto;}/*也可以给列表增加一个占位元素，自动缩放填满剩余空间*//*.list::after{content:'';flex:1;height:0;}*/.list.item:nth-last-child(-n+4){margin-bottom:0;}</style><!--html--><divclass="list"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div></div>

效果如下：

可能有些小伙伴觉得懒得记，那么下面直接给出封装好的sass mixin, 复制即可使用:

/***多列布局*$count项目数量*$itemWidth项目宽度，百分比，不含百分号*$itemHeight项目高度，随意*/@mixingrid($count:4,$itemWidth:20,$itemHeight:auto){$rest:100-$itemWidth*$count;//剩余空间$space:percentage($rest/($count-1)/100);//边距display:flex;flex-wrap:wrap;/*此处的*号建议替换成具体的布局容器（div，view...），以加快css解析*/&>*{flex:00#{$itemWidth+'%'};height:$itemHeight;margin-right:$space;margin-bottom:$space;box-sizing:border-box;&:nth-child(#{$count}n){margin-right:0;}&:nth-last-child(-n+#{$count}){margin-bottom:0;}/*为了兼容space-between的布局，占满剩余空间*/&:last-child{margin-right:auto;}}}/*使用方法*/.list{/*一行4项，每项20%宽度*/@includegrid(4,20)}

以上为flex版本，假如你需要兼容ie浏览器，那么可以用float布局替换，float自动左对齐，也就不需要填充最后的剩余空间了。

方案三：网格布局网格布局，默认就是左对齐，即使使用space-between。

<style>.list{display:grid;justify-content:space-between;grid-template-columns:1fr1fr1fr1fr;/*设置等比列*/gap:10px;/*行间距*/}.item{background-color:aqua;height:100px;}</style><!--html--><divclass="list"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div></div>

效果如下：