使用 flexbox 可轻松实现子元素等高布局，其通过父容器设置 display: flex 使子元素自动拉伸至相同高度，适合响应式设计；css grid 通过 display: grid 和 grid-template-columns 定义列宽，行高由最高子元素决定，适用于复杂二维布局；table-cell 方式则模拟表格行为，兼容老浏览器但灵活性差。推荐优先采用 flexbox 或 grid，避免固定高度或 javascript 计算，以提升性能与可维护性。
实现子元素等高布局在CSS中很常见，尤其在多列布局中希望各列视觉上对齐。以下是几种实用且现代的实现方式，无需JavaScript。
使用 Flexbox 实现等高子元素
Flexbox 是最简单、最常用的实现等高布局的方法。父容器设置为 display: flex 后，所有子元素默认拉伸至相同高度。
- 父容器使用 display: flex
- 子元素会自动拉伸，填满最长的那一个的高度
- 适合响应式布局，兼容性良好（IE10+）
示例代码：
.container {
display: flex;
}
<p>.item {
/<em> 不需要额外设置高度 </em>/
padding: 20px;
background: #f0f0f0;
margin: 5px;
}</p>
使用 CSS Grid 实现等高布局
CSS Grid 提供了强大的二维布局能力，也能自然实现等高效果。
- 父容器设置 display: grid
- 通过 grid-template-columns 定义列宽
- 行高由内容最多的格子决定，其他自动对齐
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
gap: 10px;
}
<p>.item {
background: #e0e0e0;
padding: 20px;
}</p>
使用表格显示模式（table-cell）
通过模拟表格行为也能实现等高，适合老浏览器支持场景。
- 父容器设为 display: table，宽度100%
- 子元素设为 display: table-cell
- 所有子元素自动等高，类似HTML表格
注意：该方法不支持 flex 或 grid 的灵活换行，移动端适配需额外处理。
示例代码：
.container {
display: table;
width: 100%;
}
<p>.item {
display: table-cell;
width: 33.3%;
padding: 20px;
background: #ddd;
}</p>
避免使用固定高度或 JavaScript
固定高度无法适应动态内容，JavaScript 计算不仅复杂还影响性能。推荐优先使用 Flexbox 或 Grid，语义清晰，维护简单。
基本上就这些。选择哪种方式取决于你的布局需求和浏览器支持要求。Flexbox 最常用，Grid 更强大，table-cell 可作为降级方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
