本篇文章为大家展示了CSS中怎么实现多行多列布局,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。方案一:标签补位我们都知道,之所以对不齐是因为最后一行的子项目没有达到
本篇文章为大家展示了CSS中怎么实现多行多列布局,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
方案一:标签补位
我们都知道,之所以对不齐是因为最后一行的子项目没有达到4个,space-between的对齐方式,自然会把中间空出来。既然如此,何不直接补位,让元素排满4个。
<!-- 样式 --> <style> .list{ display: flex; justify-content: space-between; flex-wrap: wrap; } .item{ flex: 0 0 24%; height: 100px; background-color: aqua; margin-bottom: 10px; } .item-fill{ flex: 0 0 24%; height:0; } .list .item:nth-last-child(-n+4){ margin-bottom: 0; } </style> <!-- html --> <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item-fill"></div> <div class="item-fill"></div> <div class="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: 0 0 24%; height: 100px; background-color: aqua; margin-right: calc(4% / 3); margin-bottom: calc(4% / 3); } .item:nth-child(4n){ margin-right: 0; } .item:last-child{ margin-right: auto; } .list .item:nth-last-child(-n+4){ margin-bottom: 0; } </style> <!-- html --> <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
效果如下:
可能有些小伙伴觉得懒得记,那么下面直接给出封装好的sass mixin, 复制即可使用:
@mixin grid($count:4, $itemWidth:20, $itemHeight:auto) { $rest: 100 - $itemWidth * $count; // 剩余空间 $space: percentage($rest/($count - 1)/100); // 边距 display: flex; flex-wrap: wrap; & > * { flex: 0 0 #{$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; } &:last-child { margin-right: auto; } } } .list{ @include grid(4,20) }
以上为flex版本,假如你需要兼容ie浏览器,那么可以用float布局替换,float自动左对齐,也就不需要填充最后的剩余空间了。
方案三:网格布局
网格布局,默认就是左对齐,即使使用space-between。
<style> .list { display: grid; justify-content: space-between; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; } .item{ background-color: aqua; height: 100px; } </style> <!-- html --> <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
效果如下:
上面的三个方案各有各的好处:
方案一的缺点是实现不够优雅,需要增加无用的占位标签。
方案二倒没什么缺点,除了写法会复杂点,但只要封装好mixin在sass中使用足够简单,即使需要兼容ie,也只需要换成float即可。
方案三,兼容性最差,无法在ie中正常使用,但用法最简单,布局甚至比flex还要强大。
上述内容就是CSS中怎么实现多行多列布局,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网html频道。
--结束END--
本文标题: CSS中怎么实现多行多列布局
本文链接: https://www.lsjlt.com/news/72625.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0