flexbox 项目可以更喜欢包装而不是扩展它们的容器吗？

Posted 2023-03-05

【中文标题】flexbox 项目可以更喜欢包装而不是扩展它们的容器吗？

【英文标题】：Can flexbox items prefer to wrap instead of expanding their container?

【发布时间】：2016-03-07 02:08:16

【问题描述】：

我正在创建一个卡片式布局，其中单个卡片垂直堆叠。在更高的屏幕宽度下，使用的卡片列越来越多 - 使用尽可能少的垂直空间。

我正在使用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>

【问题讨论】：

我也经常遇到这个问题。为了让弹性项目在列方向上换行，需要定义一个高度。 SMH。问题不会发生在行方向。我还没有找到解决办法。更糟糕的是，一旦你解决了这个问题，你就需要处理这个问题：***.com/q/33891709/3597276

【参考方案1】：

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

.card-container 
    max-height: 100vh

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

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

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