如何让换行的Flex容器填充高度并自定义行高

问题出在你给Flex容器设置了align-content: stretch，这个属性会让容器内的多行拉伸以填满容器的可用高度。当容器没有固定height时，容器高度会被这些拉伸后的行撑大，最终导致两行高度被强制均分。

解决方案 #

核心是修改容器的align-content属性，将其从stretch改为其他值，比如flex-start（让多行靠顶部排列，行高度由自身内容决定）、flex-end（靠底部）或center（居中），根据你的布局需求选择。

修改后的完整代码 #

CSS 代码

#con {
  width: 300px;
  border: solid 1px red;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 替换原有的stretch */
}

#one {
  border: solid 1px green;
  flex-grow: 1;
}

#two {
  border: solid 1px magenta;
  width: 40px;
}

#tre {
  width: 100%;
  height: 50px;
  border: solid 1px blue;
}

HTML 代码

<div id="con">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="tre">3</div>
</div>

这样修改后，第一行的高度会由#one和#two的内容及自身属性决定，第二行保持你设置的50px高度，容器总高度为两行高度之和，不会再出现均分的情况。

内容的提问来源于stack exchange，提问作者stackers