如果高度可用，则将项目垂直堆叠成一行

Question

我有一个flex行，里面有一些项目。

这些物品可以按高度缩放，但有些物品仍然很小。

我想知道是否可以将某些项目堆叠在弹性框中。

下面是我做的一个快速示例：

.row {
background: #ccc;
display: flex;
justify-content: space-around;
align-items: flex-start;
}
span {
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
}

<div class="row">
<div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
<ul>
<li>3.a</li>
<li>3.b</li>
<li>3.c</li>
</ul>
</div>
<div class="item">
<span>4</span>
<ul>
<li>4.a</li>
<li>4.b</li>
<li>4.c</li>
</ul>
</div>
</div>

代码笔

在本例中，#1和#2不占用太多垂直空间，所以我希望它们叠放在一起。

如果不将整行重组为两列，这可能吗？

---

编辑：

这不是这篇文章的重复：如何在Flexbox中禁用等高列？

建议的帖子提到使用align-items: flex-start。

这有帮助，但不能回答我的问题。

Answer 1

我在flexbox中看到这种情况的唯一方法是使用flex-flow: column wrap和容器上的固定高度。

.row {
background: #ccc;
display: flex;
flex-flow: column wrap;
max-height: 150px;
}
span {
display: inline-block;
font-weight: bold;
padding: 0.5em 1em;
}

<div class="row">
<div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
<ul>
<li>3.a</li>
<li>3.b</li>
<li>3.c</li>
</ul>
</div>
<div class="item">
<span>4</span>
<ul>
<li>4.a</li>
<li>4.b</li>
<li>4.c</li>
</ul>
</div>
</div>