当 flex-direction 为 column 时，divs 占据所有可用宽度。如何防止这种情况？ [复制]

Question

见附件sn-p。 对于内容，我需要每个项目占用宽度空间。 弹性项目需要垂直堆叠，如示例中所示。 如何实现？

怎么做？

.container {
  display:flex;
  flex-direction:column;
}
.green {
  background-color:green;
}
.red {
  background-color:red;
}

<div class="container">
  <div class="green"> hello world</div>
  <div class="red"> hello world2</div>
</div>

Answer 1

假设它们仍应垂直堆叠，请使用 display: inline-flex，它们的大小将与最宽项的内容相同。

对于要折叠成各自内容的每一行，请使用 align-items: flex-start，并注意，这也会在使用 display: flex 时使它们折叠。

为什么它们拉伸到相等的宽度，是因为align-items 默认为stretch，所以通过使用任何其他值，它们将根据内容调整大小

.container {
  display: inline-flex;
  flex-direction:column;
  align-items: flex-start;
}
.green {
  background-color:green;
}
.red {
  background-color:red;
}

<div class="container">
  <div class="green"> hello world</div>
  <div class="red"> hello world2</div>
</div>