CSS Flex项目垂直排列，再水平排列

Question

如果容器具有固定的宽度和高度，是否可以将子元素移动到下一行，直到垂直方向上有足够的空间，然后当没有更多的垂直空间时，使最后一行的子元素占据宽度空间。

很难口头表达我想要实现的内容，因此这里是我当前拥有的JsFiddle：链接。

.parent {
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.child {
  width: 160px;
  height: 80px;
  margin: 4px;
  background: red;
}

<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>

我希望实现的效果如下图：

- sportik

Answer 1

如果您使用列方向，就可以得到类似的效果。在这种情况下，溢出会发生在右侧而不是底部：

.parent {
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid black;
  display: flex;
  flex-direction:column;
  justify-content:flex-end;
  flex-wrap: wrap;
  overflow: hidden;
}

.child {
  width: 160px;
  height: 80px;
  margin: 4px;
  background: red;
}

<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>

- Temani Afif

---

它几乎像必需品一样工作，但并不完全相同。在您的解决方案中，如果我添加一个孩子（第8个），那么它将接管第二行。但是它不应该显示出来，它应该位于第7个孩子的右侧，超出父块。 - sportik

@ sportik 是的，我知道，这就是为什么我说它是“类似”的解决方案而不是完全相同的解决方案;) 我只是改变了溢出方向以近似满足您的需求，并提供了一种解决方法。 - Temani Afif