使 flexbox div 垂直包装内容

Question

我正在尝试将三个 flex box div 连续放置。

<div style="display: flex; flex-direction: row">
  <div style="flex:1; border: 1px solid #ccc;">1<br />A<br />B<br />C<br />D<br />E</div>
  <div style="flex:1; border: 1px solid #ccc;">2</div>
  <div style="flex:1; border: 1px solid #ccc;">3</div>
</div>

在这里，我没有对子 div 应用任何高度样式，但它们显示为

请注意，内容为 2 和 3 的 div 已假定内容为第 1 个分区的高度 1ABCDE

上述代码的小提琴 https://jsfiddle.net/4oddowjw/4/

我希望它看起来像这样，但我没有在这些 div 上使用高度的奢侈

我无法指定高度。在我的应用程序中，高度是动态的，并应用于这些弹性框的子级。

有没有办法让这些 div 垂直包装它们的内容？ 我尝试将“高度：自动”添加到 div，但没有成功 'height: auto'示例已应用https://jsfiddle.net/4oddowjw/5/

Answer 1

您必须将align-items:flex-start; 添加到容器中：

.container {
  align-items:flex-start;
  display: flex; 
  flex-direction: row; 
}
.item {
  flex:1; 
  border: 1px solid #ccc;
}

<div class="container">
  <div class="item">1<br />A<br />B<br />C<br />D<br />E</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

你更新的小提琴：https://jsfiddle.net/4oddowjw/7/

说明：
容器项的默认对齐方式为stretch。所有项目的高度都相同。如果你想按内容包装项目，你必须用align-items:flex-start;覆盖容器上的这个默认值。
更多关于 flexbox 的信息可以在这里找到：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

W3C 官方规范：https://drafts.csswg.org/css-flexbox-1/#align-items-property