使用flexbox連續控制項目數

Question

我想按原樣在第一行中顯示4個項目，但在第二行中僅顯示3個項目，然后在第三行中顯示4個項目，在第四行中顯示3個項目，依此類推...

我已經通過nth-child實現了這一點，但是代碼太多了，並且不靈活且不可擴展。

flex有可能嗎？ 還是網格？

 * { box-sizing: border-box; } .grid-wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .grid-wrapper .grid-item { width: 25%; text-align: center; padding: 5px; } p { background: #ddd; padding: 15px; } 

 <div class="grid-wrapper"> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> </div> 

Answer 1

您只需要考慮以下一條規則：

 /*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

訣竅是使一個元素更大以觸發換行，然后依靠flex-grow填充空間。

完整代碼

 * { box-sizing: border-box; } .grid-wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .grid-wrapper .grid-item { width: 25%; text-align: center; padding: 5px; flex-grow: 1; } .grid-wrapper .grid-item:nth-child(7n + 5) { width: calc(100%/3); flex-grow:0; } p { background: #ddd; padding: 15px; } 

 <div class="grid-wrapper"> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div><div class="grid-item"> <p>Grid Item</p> </div> </div> 

Answer 2

flex有可能嗎？ 還是網格？

這是使用網格的解決方案，更易於構建：

• 考慮使用grid-template-columns: repeat(12, 1fr)的12列網格布局grid-template-columns: repeat(12, 1fr) ，

• 使用grid-column: span 3將每個grid-item分為4列grid-column: span 3 ，

• 7個grid-item以一個模式重復； 這意味着每偶數行都有3個項， 第n個子項索引分別為7n ， 7n - 1和7n - 2 。

請參見下面的演示：

 * { box-sizing: border-box; } .grid-wrapper { display: grid; /* grid container */ grid-template-columns: repeat(12, 1fr); /* 12-column layout */ } .grid-wrapper .grid-item { text-align: center; padding: 5px; grid-column: span 3; /* 4 items in a row */ } .grid-wrapper .grid-item:nth-child(7n - 2), .grid-wrapper .grid-item:nth-child(7n - 1), .grid-wrapper .grid-item:nth-child(7n) { /* even row */ grid-column: span 4; /* 3 items in the even row */ } p { background: #ddd; padding: 15px; } 

 <div class="grid-wrapper"> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> </div> 

---

Flexbox解決方案

在flexbox的情況下，我將使用幾乎相同的第n個子邏輯，而代碼中唯一的變化如下：

.grid-wrapper .grid-item:nth-child(7n - 2),
.grid-wrapper .grid-item:nth-child(7n - 1),
.grid-wrapper .grid-item:nth-child(7n) { /* even row */
  width: 33.33%;
}

請參見下面的演示：

 * { box-sizing: border-box; } .grid-wrapper { display: flex; flex-wrap: wrap; justify-content: center; } .grid-wrapper .grid-item { width: 25%; text-align: center; padding: 5px; } p { background: #ddd; padding: 15px; } /* ADDED THESE */ .grid-wrapper .grid-item:nth-child(7n - 2), .grid-wrapper .grid-item:nth-child(7n - 1), .grid-wrapper .grid-item:nth-child(7n) { /* even row */ width: 33.33%; } 

 <div class="grid-wrapper"> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> <div class="grid-item"> <p>Grid Item</p> </div> </div> 

---

單獨說明一下，如果您有興趣使用Flexbox 連續放置n個項目 ，則以下答案可能會為您提供更多信息：

• 每行5個項目，Flexbox中的項目會自動調整大小
• 如何使用Flexbox從特定項目開始新行？