你肯定会用到的CSS多行多列布局

前言：因为项目中使用flex过程中，如果采用space-between两端对齐，会遇到最后一行难以对齐的问题。本文主要对多行多列这种常见的布局，列出解决方案，方便大家日常开发使用。

话不多说，直接进入正题：

你肯定会用到的CSS多行多列布局

方案一：标签补位

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

<!-- 样式 -->  
<style> .list{  
        display: flex;  
        justify-content: space-between;  
        flex-wrap: wrap;  
    }  
    .item{  
        /* flex: 0 0 24% 该属性等价于 flex:none;width:24% */  
        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>

效果如下：

你肯定会用到的CSS多行多列布局

如果子元素个数不是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;  
        /* 边距懒得算，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 -->  
<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>

效果如下：

你肯定会用到的CSS多行多列布局

可能有些小伙伴觉得懒得记，那么下面直接给出封装好的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。

<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>

效果如下：

你肯定会用到的CSS多行多列布局