Flexbox布局下如何实现等高列内对应子元素同高度对齐

解决方案 #

你只需要将每列也设置为垂直方向的Flex容器，让中间的正文区域自动填充剩余高度即可实现所有对应元素对齐，修改后的代码如下：

调整后CSS代码

.container {
  display: flex;
  /* 可选：添加列间距，可根据需求调整 */
  gap: 16px;
}

.column {
  flex: 1;
  border: 1px solid red;
  /* 新增：列内部启用垂直Flex布局 */
  display: flex;
  flex-direction: column;
  /* 可选：添加内边距避免内容贴边 */
  padding: 12px;
}

/* 新增：中间正文容器自动填充剩余垂直空间 */
.content {
  flex: 1;
}

调整后HTML代码（推荐更通用的结构，方便后续扩展正文内容）

<div class="container">
  <div class="column">
    <h2> Some title </h2>
    <div class="content">
      <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>
    <div class="content">
      <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>
    <div class="content">
      <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore      et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>
</div>

实现原理 #

1. 外层container的Flex布局已经保证所有列高度统一和最长列对齐
2. 每列设置为垂直方向Flex容器后，内部元素按垂直方向排列
3. 中间的.content容器设置flex: 1后，会自动占用列内标题、底部最终句之外的所有剩余垂直空间，自动把底部最终句挤到列的最下方
4. 最终所有列的标题顶部对齐、正文顶部对齐、底部最终句底部对齐，完全符合需求。该方案兼容性极佳，所有现代浏览器都支持。

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