如何使弹性项目不填充弹性容器的高度？ [复制]

Posted 2023-03-05

【中文标题】如何使弹性项目不填充弹性容器的高度？ [复制]

【英文标题】：How to make a flex item not fill the height of the flex container? [duplicate]

【发布时间】：2016-01-17 17:02:37

【问题描述】：

正如您在下面的代码中看到的那样，flex 容器内的左侧 div 会拉伸以适应右侧 div 的高度。是否可以设置一个属性来使其高度成为容纳其内容所需的最小值（就像通常的 height: auto div 外的 flex 容器一样）？

#a 
  display: flex;

#a > div 
  background-color: red;
  padding: 5px;
  margin: 2px;

#b 
  height: auto;

<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>

【参考方案1】：

align-items 或 align-content 属性控制此行为。

align-items 将项目的位置垂直定义为flex-direction。

默认flex-direction为row，因此可以使用align-items控制垂直放置。

还有align-self 属性来控制每个项目的对齐方式。

#a 
  display:flex;

  align-items:flex-start;
  align-content:flex-start;
  

#a > div 
  
  background-color:red;
  padding:5px;
  margin:2px;
  
 #a > #c 
  align-self:stretch;
 

<div id="a">
  
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
  
</div>

css-tricks 在该主题上有出色的 article。 我建议多读几遍。

【参考方案2】：

当你创建一个弹性容器时，各种默认的弹性规则就会发挥作用。

其中两个默认规则是flex-direction: row 和align-items: stretch。这意味着弹性项目将自动对齐在一行中，并且每个项目将填充容器的高度。

如果您不希望 flex 项目拉伸 - 即，就像您写的那样：

使其高度成为容纳其内容所需的最小高度

...然后简单地用align-items: flex-start覆盖默认值。

#a 
  display: flex;
  align-items: flex-start; /* NEW */

#a > div 
  background-color: red;
  padding: 5px;
  margin: 2px;

#b 
  height: auto;

<div id="a">
  <div id="b">left</div>
  <div>
    right<br>right<br>right<br>right<br>right<br>
  </div>
</div>

这是来自flexbox spec 的插图，突出显示了align-items 的五个值以及它们如何在容器中定位弹性项目。如前所述，stretch 是默认值。

^来源：W3C