调整同一列中的flex项

Question

我的页面上有一个水平滑块(可滚动)，其中包含子卡列表.下面的代码片段运行得非常好。

JSFiddle-1：https://jsfiddle.net/28rnwpqk/

​

​

我现在想显示不同大小的卡片，它们是动态的。我对我的容器css做了如下更改，以便在存在空格的情况下将多个卡堆叠在同一列中。

.container {
  ...
  flex-direction: column;
  flex-wrap: wrap;
  ...
}

JSFiddle-2：https://jsfiddle.net/k60zLg74/

​

​

这将导致父容器宽度仅设置为第一个滑块项的宽度，即flex方向的bcz : column属性。这样的背景色，滑块卷轴已经停止工作。在不影响容器宽度的情况下实现这一目标的正确方法是什么。我的主要要求是，如果存在空间和卡的大小是不知道预先知道的弯曲项目垂直堆放。

Answer 1

CSS网格可以更好地做到这一点：

​

.viewport {
  width: 600px;
  height: 200px;
  overflow-x: hidden;
}

.container {
  display: inline-grid;
  background-color: DodgerBlue;
  grid-auto-flow:column;
  grid-template-rows:1fr 1fr;
  grid-auto-columns:130px;
  gap: 10px;
  height: 100%;
  min-width:100%;
}

.item {
  box-sizing: border-box;
  background-color: #f1f1f1;
  padding: 20px;
  margin: 10px;
  font-size: 30px;
  grid-row:span 2;
}
.item.small {
  grid-row:span 1;
}

<div class="viewport">
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item small">3</div>
    <div class="item small">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</div>

​

Answer 2

width: max_content;设置限制容器的宽度。如果删除该属性，您的整个容器将如预期的那样具有蓝色背景：

.container {
  display: flex;
  background-color: DodgerBlue;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  height: 200px;
}