效果如下：

如果子元素個(gè)數(shù)不是4個(gè)怎么辦？我們細(xì)心觀察，不難發(fā)現(xiàn)，最后一行的最小值是1個(gè)，那么我們只需要補(bǔ)位n-1個(gè)即可。如果只有3個(gè)，也可以用偽元素::after去補(bǔ)最后一個(gè)位置。

方案二：計(jì)算剩余空間
如果我們知道最后一行剩余空間的話，完全可以控制最后一個(gè)元素的邊距或者縮放比例去占滿剩下的空間，自然就能左對(duì)齊了。要做到這一點(diǎn)，首先得確定寬度和邊距，寬度通常是已知的，我們只需要把邊距確定下來，就能確認(rèn)剩余空間。

接上面的的例子，假設(shè)一行有4個(gè)， 每個(gè)占比24%，4個(gè)就是24% * 4 = 96% ， 那么可以確定總邊距是4%，由于一行有4個(gè)元素，而最后一個(gè)的右邊距是多余的，那么可以確定單個(gè)的邊距為 4% / 3 = 1.333% , 計(jì)算出來后就可以開始寫代碼了：

效果如下：

可能有些小伙伴覺得懶得記，那么下面直接給出封裝好的sass mixin, 復(fù)制即可使用:

/**  * 多列布局  * $count 項(xiàng)目數(shù)量  * $itemWidth 項(xiàng)目寬度，百分比，不含百分號(hào)  * $itemHeight 項(xiàng)目高度，隨意  */ @mixin grid($count:4, $itemWidth:20, $itemHeight:auto) {     $rest: 100 - $itemWidth * $count; // 剩余空間     $space: percentage($rest/($count - 1)/100); // 邊距     display: flex;     flex-wrap: wrap;      /*此處的*號(hào)建議替換成具體的布局容器（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項(xiàng)，每項(xiàng)20%寬度 */     @include grid(4,20) }

以上為flex版本，假如你需要兼容ie瀏覽器，那么可以用float布局替換，float自動(dòng)左對(duì)齊，也就不需要填充最后的剩余空間了。

方案三：網(wǎng)格布局
網(wǎng)格布局，默認(rèn)就是左對(duì)齊，即使使用space-between。

效果如下：

上面的三個(gè)方案各有各的好處：

1. 方案一的缺點(diǎn)是實(shí)現(xiàn)不夠優(yōu)雅，需要增加無用的占位標(biāo)簽。

2. 方案二倒沒什么缺點(diǎn)，除了寫法會(huì)復(fù)雜點(diǎn)，但只要封裝好mixin在sass中使用足夠簡(jiǎn)單，即使需要兼容ie，也只需要換成float即可。

3. 方案三，兼容性最差，無法在ie中正常使用，但用法最簡(jiǎn)單，布局甚至比f(wàn)lex還要強(qiáng)大。

上述內(nèi)容就是CSS中怎么實(shí)現(xiàn)多行多列布局，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。