如何让Flexbox行内并排的多个Div保持相同高度？

嘿，这个需求太常见啦！不用表格的话，用CSS Flexbox或者Grid就能轻松搞定，完美解决列高度参差不齐的问题，我给你两种实用的实现方案：

方案一：Flexbox布局（兼容性较好） #

Flexbox是目前实现这类布局的首选，它天然支持子元素高度对齐，代码也很简洁：

HTML结构 #

<div class="box-container">
  <div class="box">
    <div class="col1">这里是长度不固定的文本，可能会很长很长，测试一下高度会不会被拉伸</div>
    <div class="col2">这是短文本内容</div>
  </div>
  <div class="box">
    <div class="col1">短文本</div>
    <div class="col2">这里是更长的文本内容，要确保和左边的col1高度保持一致，不能出现参差不齐的情况</div>
  </div>
</div>

CSS样式 #

/* 可选：如果要让多个.box横向排列，就给容器加这个 */
.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 多个.box之间的间距 */
}

.box {
  display: flex; /* 把.box设为Flex容器 */
  width: 100%; /* 单个.box占满一行，横向排列的话可以设为50%或者固定宽度 */
  margin-bottom: 15px;
}

.col1, .col2 {
  flex: 1; /* 让两列平分可用宽度，也可以用flex: 0 0 50%固定各占一半 */
  padding: 12px;
  border: 1px solid #eee; /* 加边框方便看效果，实际可以去掉 */
}

原理：Flex容器中的子元素（也就是.col1和.col2）默认会沿垂直方向拉伸，所以不管文本长度如何，同一.box里的两列高度都会自动保持一致。

方案二：Grid布局（写法更简洁） #

Grid布局是CSS3的新特性，对于这种二维布局来说更直观，代码量更少：

CSS样式（HTML结构和上面一致） #

.box {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 定义两列等宽 */
  gap: 10px; /* 两列之间的间距 */
  margin-bottom: 15px;
}

.col1, .col2 {
  padding: 12px;
  border: 1px solid #eee;
}

原理：Grid网格中的单元格默认高度会自动匹配同一行中最高的单元格，所以完全不用担心高度不一致的问题，写法比Flexbox更直接。

补充说明 #

这两种方案都完全不需要依赖表格，而且兼容性非常好：

• Flexbox支持到IE10及以上（IE10需要加前缀）
• Grid支持到Edge 16、Chrome 57、Firefox 52及以上，现代浏览器都能完美运行

如果你的项目不需要兼容特别老旧的浏览器，Grid布局会是更优的选择，代码更简洁易维护。

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