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

效果如下：

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

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

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

效果如下：

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

/**  * 多列布局  * $count 项目数量  * $itemWidth 项目宽度，百分比，不含百分号  * $itemHeight 项目高度，随意  */ @mixin grid($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: 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;         }          /*为了兼容space-between的布局，占满剩余空间*/         &:last-child {             margin-right: auto;         }     } }  /*使用方法*/ .list{     /* 一行4项，每项20%宽度 */     @include grid(4,20) }

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

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

效果如下：

上面的三个方案各有各的好处：

1. 方案一的缺点是实现不够优雅，需要增加无用的占位标签。

2. 方案二倒没什么缺点，除了写法会复杂点，但只要封装好mixin在sass中使用足够简单，即使需要兼容ie，也只需要换成float即可。

3. 方案三，兼容性最差，无法在ie中正常使用，但用法最简单，布局甚至比flex还要强大。

上述内容就是CSS中怎么实现多行多列布局，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格