flexbox项目是否更喜欢换行而不是扩展其容器？

Question

我正在创建一种卡式布局,其中各个卡片垂直堆叠.在更高的屏幕宽度下,使用越来越多的卡片 - 使用尽可能小的垂直空间.

我正在使用flex-flow: column wrap布局来做到这一点.但是,我发现容器需要有height或者max-height为了鼓励卡片包装.考虑到卡片的数量和它们各自的尺寸可能会发生变化,我无法确定这个高度在没有切断物品或下面有多余空间的情况下最佳状态.

任何人都可以告诉我这是否可能,或者我做错了什么？

附加片段.

.card-container {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
}
.card {
  flex: 0 0 auto;
  width: 15rem;
  margin: 0.5rem;
  background-color: #f4f4f4;
  /* max-height: ??? */
}

<div class="card-container">
  <div class="card" style="height: 20em"></div>
  <div class="card" style="height: 17em"></div>
  <div class="card" style="height: 5em"></div>
  <div class="card" style="height: 10em"></div>
  <div class="card" style="height: 21em"></div>
  <div class="card" style="height: 10em"></div>
  <div class="card" style="height: 17em"></div>
  <div class="card" style="height: 8em"></div>
  <div class="card" style="height: 20em"></div>
  <div class="card" style="height: 16em"></div>
  <div class="card" style="height: 19em"></div>
  <div class="card" style="height: 10em"></div>
  <div class="card" style="height: 5em"></div>
</div>

Answer 1

为了实现这一点，您需要为 Flex 容器设置 max-height，而不是 Flex 项目，因为您希望 Flex 项目在列中对齐并增加列以适应更宽的屏幕，并且您不希望 Flex 项目的大小发生变化，因此为 Flex 容器设置这个相对值：

.card-container {
    max-height: 100vh
}

将其添加到 Flex 容器中。这里“vh”是一个相对单位，代表“视口高度”。1 vh = 视口高度的 1%。视口 = 浏览器窗口大小。如果视口高 50 厘米，则 1 vh = 0.5 厘米。

因此，无论屏幕有多宽，插入多少张卡片，卡片有多大，只要内容的高度超过视口的高度，就会使用多列。

这些还将在宽度设置为比内容窄的显示器上创建水平滚动条。因此，如果您不希望出现滚动条，可以使用媒体查询来修复此问题。