如何使用 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>