如何使用纯CSS使flex-direction:column的flex容器内子项等高？

当然可以搞定！其实在垂直方向（flex-direction: column）的flex容器里让子元素等高，用纯CSS就完全能实现，而且逻辑很清晰～

核心原理 #

当flex容器设置为垂直排列时，默认子元素高度会随内容自适应，但我们可以利用flex布局的flex-grow属性，让所有子元素平分容器的可用垂直空间，从而强制它们高度一致。

代码示例 #

<!-- 给flex容器设置明确高度，否则它会被内容撑开，没有额外空间供子元素填充 -->
<div style="display: flex; flex-direction: column; height: 100vh; gap: 10px;">
  <div class="flex-item" style="flex: 1; border: 1px solid #ddd; padding: 1rem;">
    <!-- 包含图片、链接、按钮等任意元素 -->
    <img src="https://picsum.photos/200/100" alt="示例图片">
    <p>这里是一段较长的测试内容，用来验证高度自适应效果，不管内容多少，这个盒子都会和其他子元素一样高～</p>
    <button>点击试试</button>
  </div>
  <div class="flex-item" style="flex: 1; border: 1px solid #ddd; padding: 1rem;">
    <p>这里内容比较短</p>
  </div>
  <div class="flex-item" style="flex: 1; border: 1px solid #ddd; padding: 1rem;">
    <p>这是第三个子元素，内容也不多</p>
  </div>
</div>

关键细节说明 #

• 必须给容器设置明确高度：比如示例里的height: 100vh（占满整个视口高度），或者固定高度（height: 500px）、百分比高度（前提是父元素也有明确高度）。如果容器没有高度，它会被内容撑开，没有剩余空间让子元素去“填充”，flex-grow就起不了作用。
• 给子元素加flex: 1：这个属性是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写，它会让每个子元素在容器的剩余垂直空间里平分，最终所有子元素高度完全一致，不管自身内容多少。

拓展小技巧 #

如果需要部分子元素固定高度，其他自适应，可以给固定高度的子元素设置flex: 0 0 固定值（比如flex: 0 0 120px），剩下的子元素用flex:1来填充剩余空间，同样能实现等高+固定高度的组合效果。

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