垂直然后水平放置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>