Question

请参阅附件摘录。我需要每个项目占用宽度空间，相对于内容。 flex-items需要垂直堆叠，如示例中所示。如何实现呢？

怎么做？

.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，所以通过使用任何其他值，它们将按内容大小

＆＃13;

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

＆＃13;

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

＆＃13;

当flex-direction为列时，div占用所有可用宽度。怎么预防这个？

1 个答案: