如何使flex项目不填充flex容器的高度？

Question

如下所示的代码中，弹性容器内部的左侧div会伸展以符合右侧div的高度。是否有属性可以设置其高度为最小要求来容纳其内容（就像通常在弹性容器外面的height: auto div那样）？

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

- user81993

Answer 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。我建议多读几遍。

- Sebastian Wozny

Answer 2

当您创建 flex 容器时，各种默认的 flex 规则开始生效。

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

如果您不希望 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规范的插图，它强调了align-items的五个取值及其如何将弹性项在容器内定位。前面提到过，stretch是默认值。

^来源：W3C

- Michael Benjamin