如何使用 css flex 保持一個盒子是空的

Question

而不是顯示所有孩子，我怎樣才能在第一行只顯示 3 個藍色框和一個空框，我想要第一行有 4 個框，最后有一個空框，第二行有 4 個框，有沒有辦法做到這一點使用 css flex 還是應該將其移動到兩個不同的 flex 盒

 .parent { display: flex; flex-wrap: wrap; }.child { flex: 1 0 20%; margin: 5px; height: 100px; background-color: blue; }

 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

Answer 1

給你 go...

實現此目的的最簡單方法是將 class 添加到要隱藏的框。 您將背景顏色設置為透明。 看起來盒子是隱藏的，但實際上不是（背景顏色是透明的）。

 .parent { display: flex; flex-wrap: wrap; }.child { flex: 1 0 20%; margin: 5px; height: 100px; background-color: blue; }.child.transparent { background-color: transparent; }

 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child transparent"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>