如何灵活实现两列Flex布局中对应子元素等高对齐

这个问题我碰到过好多次啦，不用固定高度的话，有几个超灵活的CSS方案，完全不用提前猜内容高度，给你整理两个最实用的：

方案1：给每列加垂直Flex布局，让子元素自动拉伸对齐 #

完全不用改你的HTML结构，只需要调整CSS：把每个.col变成垂直方向的Flex容器，再让里面的子元素自动填充所在行的高度，这样不管是文本还是按钮，对应位置的元素高度都会完全一致，底部边框自然就对齐了。

修改后的CSS代码：

.row { display: flex; }
.col { 
  width: 50%; 
  display: flex; /* 把列转为flex容器 */
  flex-direction: column; /* 让子元素垂直排列 */
}
.col > * { 
  padding: 5px; 
  border-bottom: 1px solid red; 
  flex: 1; /* 关键：让子元素填充列内的可用垂直空间 */
  /* 可选：如果想让按钮在容器里垂直居中，加上下面两行 */
  display: flex;
  align-items: center;
}

原理很简单：flex:1会让每个子元素均分列内的垂直空间，当某一行的元素（比如带按钮的那个）高度更高时，对应列的同位置元素会被自动拉伸到相同高度，边框自然就对齐了。加那两行可选样式是为了让按钮在容器里居中，视觉效果更舒服。

方案2：改用CSS Grid重构布局（更简洁） #

如果你能稍微调整一下HTML结构，直接用Grid布局会更省心——Grid天生就会让同一行的元素高度匹配，完全不需要额外设置：

先把HTML里的.col嵌套去掉，直接把所有子元素放在.row里：

<div class="row">
  <div>lorem</div>
  <div>lorem</div>
  <div>ipsum</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>dolor</div>
  <div>sit</div>
  <div><button>sit</button></div>
  <div>amet</div>
  <div><button>amet</button></div>
</div>

然后写极简的CSS：

.row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}
.row > * {
  padding: 5px;
  border-bottom: 1px solid red;
}

Grid会自动把第1、3、5...个元素放在第一列，第2、4、6...个放在第二列，同一行的两个元素高度会自动同步，连拉伸都不用设置，结构还更简洁。

总结一下，方案1最贴合你现有的代码，零HTML改动；方案2更适合重构布局。两种方法都完全不需要提前知道按钮或内容的高度，灵活得很～

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