本文介绍了如何使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容器的高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 15:52