CSS中怎么實現多行多列布局

本篇文章為大家展示了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>

效果如下：

如果子元素個數不是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>

效果如下：

可能有些小伙伴覺得懶得記，那么下面直接給出封裝好的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>

效果如下：

上面的三個方案各有各的好處：

1. 方案一的缺點是實現不夠優雅，需要增加無用的占位標簽。

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

3. 方案三，兼容性最差，無法在ie中正常使用，但用法最簡單，布局甚至比flex還要強大。

上述內容就是CSS中怎么實現多行多列布局，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。