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

Question

正如您在下面的代码中看到的那样，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>

Answer 1

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

align-items定义了商品＆＃39;将垂直定位到flex-direction。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

css-tricks在这个主题上有一个很好的article。我建议阅读几次。

Answer 2

创建弹性容器时，会出现各种默认弹性规则。

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

如果你不希望弹性项目延伸 - 就像你写的那样：

  

使其高度为保持其内容所需的最低值

...然后只需使用align-items: flex-start覆盖默认值。

＆＃13;

＆＃13;

#a {
  display: flex;
  align-items: flex-start; /* NEW */
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

^来源：W3C