html - CSS Flex 元素垂直然后水平

Question

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

很难口头解释我想要实现的目标，所以这是我目前拥有的 JsFiddle: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>

我想要实现的目标的图片:

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>