Flexbox设置flex-direction:column时，对齐不同高度的项目

当我们用Flexbox的垂直列布局时，要让高度不一的子项目实现精准对齐，核心是利用Flex的空间分配特性，结合margin: auto来控制元素位置。我给你拆解下具体实现思路和完整示例：

关键实现逻辑 #

1. 父容器开启Flex布局：让子项目（比如示例里的<li>）自动并排，为后续均分高度打下基础。
2. 子项目设置垂直Flex+均分高度：给每个子项目加display: flex; flex-direction: column; flex: 1，flex:1会强制所有子项目平分父容器的可用高度，确保它们的总高度完全一致。
3. 用margin: auto固定元素位置：通过自动边距填充剩余空间，不管内部内容高度如何，都能让指定元素固定在顶部、中间或底部位置。

完整示例代码 #

ul { 
  display: flex; 
} 

li { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  border: 1px solid green; 
  justify-content: flex-start; 
  align-items: center 
} 

ul, h3, h4, p { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
} 

h3 { 
  margin-bottom: auto; /* 把下方元素往下推，自己固定在顶部 */
} 

h4 { 
  border-top: 1px solid green; 
  margin-bottom: auto; /* 上下自动填充空间，保持在中间 */
} 

p { 
  border-top: 1px solid green; 
  margin-top: auto; /* 把自己固定在底部 */
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4<br>h4</h4>
    <p>p<br>p<br>p</p>
  </li>
  <li>
    <h3>h3<br>h3</h3>
    <h4>h4</h4>
    <p>p<br>p</p>
  </li>
</ul>

效果说明 #

不管每个<li>内部的标题、内容高度差异多大，<h3>都会固定在每个子项的顶部，<h4>保持垂直居中，<p>固定在底部——因为flex:1让所有子项高度统一，margin:auto则自动分配了元素间的剩余空间，强制实现对齐效果。

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