如何使用Flexbox实现多列布局下不同长度标题的正文对齐

现有横向flex布局中，各列标题长度不一致会产生折行高度差，最终导致正文起始位置错位，通过给列容器增加嵌套flex规则即可零JS实现对齐，无需固定标题高度，完全适配数据库拉取的动态内容。

核心修改点 #

仅需要调整CSS样式，原有HTML结构无需任何改动：

• 给每列的.column容器设置为纵向排列的flex容器
• 给列内的标题元素设置flex: 1，让标题自动占满列内标题区域的高度差，把所有列的正文内容推到同一水平起始位置

完整修改后CSS代码 #

.flexer{
  display:flex;
  margin:1px;
  justify-content: space-around;
  /* 可选：增加列间距优化展示效果 */
  gap: 16px;
}

.flexer .column{
    border: 1px solid #ebebeb;
    /* 核心：列容器设为纵向flex布局 */
    display: flex;
    flex-direction: column;
    /* 可选：让所有列等宽，按需调整 */
    flex: 1;
    padding: 1rem;
}
h1.title{
  font-size: 2.0rem;
  /* 核心：标题自动填充高度差，对齐正文基线 */
  flex: 1;
}

效果对照 #

原有错位效果 #

对齐后预期效果 #

补充说明 #

• 该方案为纯CSS实现，无额外性能开销，兼容所有支持flexbox的现代浏览器
• 如果后续列内需要新增其他元素（比如标题下方的标签、摘要、操作按钮），只需要在需要对齐的元素上方的最后一个元素上设置flex:1即可扩展对齐规则
• 若需要限制标题最大显示行数，可给h1.title增加多行截断样式，不会破坏对齐逻辑：

  h1.title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 最多显示3行，可按需修改数值 */
    overflow: hidden;
  }
  

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