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

Question

正如您在下面的代码中看到的那样,Flex容器内的左侧div伸展以满足右侧div的高度.是否有一个属性,我可以设置使其高度保持其内容所需的最小值(如height: autoFlex容器外的常用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>

Answer 1

的align-items,或分别align-content属性控制此行为.

align-items定义了项定位垂直于flex-direction.

默认flex-direction是row,therfore垂直放置可与控制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有一篇关于这个主题的优秀文章.我建议阅读几次.

Answer 2

创建Flex容器时,会出现各种默认的弹性规则.

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

如果您不希望弹性项目伸展 - 即,就像您写的:

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

...然后简单地覆盖默认值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它们在容器中定位flex项的五个值以及它们的位置.如前所述,stretch是默认值.

^{资料来源:W3C}