使用 align-items: stretch 并配合 min-height 可解决子元素高度不一致导致的布局错位。1. 父容器设置 display: flex；2. 子元素避免固定 height，使用 min-height 保证最低高度；3. align-items: stretch 为默认行为，自动拉伸子元素填满交叉轴；4. 结合 flex-grow 或 flex-direction 增强布局适应性。适用于卡片布局、内容行数不一等场景，保持视觉对齐。
当CSS子元素高度不一致导致父容器内布局错位时，可以通过调整Flexbox的对齐方式或设置最小高度来解决。常见且有效的做法是使用 align-items: stretch 或为子元素设置 min-height，让它们在视觉上保持整齐。
使用 align-items: stretch（默认行为）
在 Flex 布局中，父容器默认会拉伸子元素以填满交叉轴（通常是垂直方向的高度）。只要子元素没有设置固定高度，这个行为就会生效。
说明与建议：- 确保父容器设置了 display: flex
- 不要给子元素设置固定 height，否则会阻止拉伸
- 若子元素内部内容高度不同，但希望外框对齐，stretch 能自动补齐
示例代码：
.container {
display: flex;
align-items: stretch; /* 可省略，因为这是默认值 */
}
.item {
/* 避免设置 height: xxpx */
min-height: 100px; /* 推荐用 min-height 替代 height */
}
使用 min-height 统一基准高度
如果某些子元素内容太少导致高度过小，可以设置一个统一的 min-height 来保证最低显示高度，避免因内容差异造成明显错位。
立即学习“前端免费学习笔记（深入）”；
适用场景：- 卡片式布局中各模块高度需基本一致
- 文字行数不同但希望整体对齐
- 配合 flex 布局使用，增强视觉一致性
示例：
.card {
min-height: 120px;
display: flex;
align-items: center; /* 内容垂直居中 */
}
结合 flex-direction 和 flex-grow 的补充方案
在复杂布局中，可进一步通过 flex-grow 扩展特定子元素高度，或使用 flex-direction: column 控制主轴方向，提升适应性。
- 让某个子区域自动占满剩余空间：设置 flex-grow: 1
- 列布局中控制高度延伸方向更直观
基本上就这些。合理使用 align-items: stretch 和 min-height，能有效解决多数因子元素高度不一致引起的布局问题，关键在于避免固定高度限制，并利用 Flexbox 的弹性特性。不复杂但容易忽略。
