17370845950

Flex布局中等高列的核心是父容器设display: flex，子项默认align-items: stretch实现等高；横向布局时子项高度自动等高，纵向时宽度等宽；避免设置height、align-self等覆盖stretch行为。

Flex 布局中实现等高列非常简单，核心就是让容器启用 flex，并设置 align-items: stretch（这是默认值，通常无需显式书写）。

确保父容器是 flex 容器

给父元素设置 display: flex 或 display: inline-flex，子元素就会自动成为 flex 项。此时只要子项没有设置固定高度、min-height 或 align-self 覆盖，默认就会被拉伸填满容器高度。

• 横向布局（主轴为 row）：子项高度自动等高
• 纵向布局（主轴为 column）：子项宽度自动等宽（对应 stretch 的横向表现）
• 若子项设置了 height、max-height 或 align-self: flex-start 等，会覆盖 stretch 行为

常见写法示例

HTML 结构：

CSS：

.container {
  display: flex;
  /* align-items: stretch; ← 默认即如此，可省略 */
}
.col {
  padding: 1rem;
  background: #f0f0f0;
  /* 不设 height / min-height / align-self，保持 stretch */
}

注意兼容性和干扰项

虽然 align-items: stretch 是 flex 默认行为，但实际不等高的常见原因有：

• 父容器没设高度，且子项内容高度不一致 → flex 容器高度由最高子项撑开，其余自然拉伸，仍等高；但如果父容器被限制（如 max-height），需检查是否触发了收缩
• 子项内使用了 display: table-cell 或绝对定位脱离文档流，可能影响 stretch 效果
• 旧版 Safari 对 min-height: 100% 在 flex 子项中支持不佳，建议避免混用
• IE10–11 需要加 -ms-flex-align: stretch 兼容（若需支持）

需要等高但又想控制最小高度？

可以安全地给子项加 min-height，stretch 仍生效（只要内容没超过该值）；若内容超了，子项会自动增高，其他列也会同步拉高 —— 这正是等高列的预期行为。

• ✅ 推荐：min-height: 100px（保底高度，不破坏等高）
• ⚠️ 小心：height: 200px（强制固定高度，会切断 stretch）
• ✅ 安全：align-self: stretch（显式重申，增强可读性）