当flex方向是列，div采取所有可用的宽度。如何防止这一点？[重复]

Question

请参阅附加的代码段。我需要每个项目采取宽度空间，就内容而言。弹性项需要垂直堆叠，如示例中所示。如何实现？

怎么做？

css prettyprint-override">.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时折叠。

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

.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>