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>