使用Flexbox实现行内三列等高布局问题排查

• flex布局的容器默认开启align-items: stretch属性，子元素会自动拉伸到和最高子项等高，本身就支持你要的等高效果
• 你给.col设置了height: 100%，覆盖了flex的默认拉伸行为。同时你的所有父级元素（.row、.grid、.data、.container）都没有设置固定高度，百分比高度没有参考基准，导致高度计算失效，列高最终跟随自身内容长度变化。

删除.col规则中的height: 100%即可，.row和.grid里冗余的height: 100%也可以一并删除，不影响功能。

修改后完整CSS参考：

.container {
  text-align: center;
  display: block;
  width: 100%;
}

.grid {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  background: #444;
  padding: 2em;
  flex: 1;
  border: 1px solid blue;
}

如果需要固定整行的高度，直接给.row设置固定高度值即可，所有列会自动撑满对应高度。

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