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

问题描述

正如你可以在下面的代码中看到的，flex容器中的左div伸展以满足右div的高度。是否有一个属性，我可以设置使其高度保持其内容所需的最小值（像通常 height：auto divs外部flex容器）？

  #a {display：flex;}＃a> div {background-color：red; padding：5px; margin：2px;}＃b {height：auto;}  

 < div id =a> < div id =b>左< / div> < div>右< br>右< br>右< br>右< br>右< br>< / div>< / div>  

解决方案

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>左< / div> < div id =c>中< / div> < div>右< br>右< br>右< br>右< br>右< br>< / div> < / div>  

css-tricks href =https://css-tricks.com/snippets/css/a-guide-to-flexbox/ =nofollow>文章。我建议多读几次。

As you can see in the code below, the left div inside the flex container stretches to meet the height of the right div. Is there an attribute I can set to make its height the minimum required for holding its content (like usual height: auto divs outside flex containers)?

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

解决方案

The align-items, or respectively align-content attribute controls this behaviour.

align-items defines the items positioning perpendicularly to flex-direction, the default flex-direction is row, therfore vertical placement can be controlled with align-items.There is also the align-self attribute to control the alignment on a per item basis.

#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 has an excellent article on the topic. I recommend reading it a couple of times.

这篇关于如何使flex项不填充flex容器的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！