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

Posted 2023-03-05

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

【英文标题】：when flex-direction is column, divs takes all available width. how to prevent this? [duplicate]

【发布时间】：2017-11-30 16:19:59

【问题描述】：

见附件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>

【问题讨论】：

改成flex-direction: row;

添加 display:inline-table 到子元素。

【参考方案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>

【讨论】：

它更好，但仍然不是我需要的。似乎它需要列中最长的弹性项目，并使每个人都这么长。

@LiranC 更新

@LGSon 绝招

哇，有趣的是 align-items: flex-start 与这个魔法有什么关系。

@LiranC 添加了解释为什么会修复它