css Flexbox子元素等高布局如何实现

Flexbox子元素等高布局通过display:flex实现，容器默认align-items:stretch使子元素在交叉轴拉伸。示例：.container{display:flex}即可让.item等高，适用于卡片或多列布局。需注意避免float、固定高度或absolute定位导致失效。

Flexbox 子元素等高布局的实现非常简单，只需要使用 Flexbox 的默认特性即可。在 Flex 容器中，子元素默认会拉伸以填满容器的高度，这就自然实现了等高效果。

1. 使用 display: flex 启用 Flexbox

将父容器设置为 display: flex，其所有直接子元素会自动变为等高，前提是容器有明确的高度或子元素高度不一致时由内容最少的元素决定最小高度。

示例代码：

.container {
  display: flex;
}
.item {
/ 不需要额外设置高度 /
}

2. 子元素默认拉伸（align-items: stretch）

Flex 容器的 align-items 默认值是 stretch，这意味着子元素会在交叉轴（通常是垂直方向）上拉伸以填满容器高度。

只要父容器有足够高度（比如由最高子元素撑起），其他较矮的子元素就会自动拉高到相同高度。

常见场景：

• 卡片布局，每张卡片高度一致
• 多列布局，各列视觉上对齐底部

3. 注意事项

某些情况下等高可能失效，需检查以下几点：

• 子元素设置了 float：Flexbox 下 float 无效，建议移除
• 子元素有固定高度或 max-height 限制
• 子元素内部内容使用了 position: absolute 脱离文档流
• 父容器未正确应用 display: flex

基本上就这些。Flexbox 的等高布局靠的是默认行为，不需要复杂计算或 JS 控制，结构清晰时效果稳定。