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容器设置此相对值：

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

将此添加到Flex容器中。在这里＆＃34; vh＆＃34;是一个相对单位，代表＆＃34;视口高度＆＃34;。 1 vh =视口高度的1％。 Viewport =浏览器窗口大小。如果视口高50厘米，1 vh = 0.5厘米。

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

这些也会在显示器上创建水平滚动条，这些显示器的宽度设置在比内容窄的宽度上。因此，如果您不想显示滚动条，可以使用媒体查询修复此问题。

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

1 个答案: