flexbox 的 align-items: stretch 是默认值，使子项在交叉轴方向自动等高拉伸，但仅对未设 height/min-height 的子项生效；若父容器无显式高度，则取最高子项高度；常见失效原因包括设 height: 100%、float、table-cell 或 align-items: flex-start 等。
flexbox 的 align-items 如何让子项等高
可以，而且是默认行为。Flex 容器在 flex-direction: row（默认）下，只要没显式设置子项的 height 或 min-height，所有子项会自动拉伸到容器最大交叉轴尺寸——也就是“等高”。这个拉伸由 align-items: stretch 控制，它正是 flexbox 的初始值。
-
align-items: stretch仅对未设置height、min-height、max-height的子项生效；一旦设了固定高度，拉伸就被覆盖 - 如果父容器没有明确高度（比如靠内容撑开），那“最大交叉轴尺寸”实际取的是子项中最高那个的高度，此时仍表现为视觉等高
- 注意：
align-self可以在单个子项上覆盖align-items，设为flex-start就会取消拉伸
为什么有时等高失效？常见拉伸被阻断的情况
等高不是“魔法”，而是拉伸机制在起作用。一旦拉伸条件被破坏，等高就消失。最常踩的坑是：
- 给子项设置了
height: 100%—— 这依赖父容器有确定高度，而 flex 容器若无显式height，100%计算为auto，结果反而不拉伸 - 子项内部用了
display: table-cell或float，破坏了 flex 子项的正常渲染流 - 父容器设置了
align-items: flex-start，主动关闭了拉伸 - 子项设置了
margin: auto在交叉轴方向，会抵消拉伸效果
用 flex: 1 强化拉伸的适用场景
当需要子项不仅等高，还要“占满剩余空间”时，flex: 1 比单纯依赖 stretch 更可靠。它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，强制子项按比例分配主轴剩余空间，同时保留交叉轴拉伸。
.container {
display: flex;
}
.item {
flex: 1; /* 关键：即使内容高度不同，也会拉伸填满容器高度 */
}- 适用于卡片列表、三栏布局等需要列高一致且响应式填充的场景
- 比
height: 100%更健壮，不依赖父容器高度是否已知 - 若只想等高但不占满主轴，用
flex: 0 0 auto+ 保持align-items: stretch即可
和 CSS Grid 等高对比：flexbox 的边界在哪
Flexbox 的等高本质是“单行/单列内拉伸”，它天然适合一维布局。如果遇到多行（flex-wrap: wrap）且要求**跨行等高**，flexbox 就无能为力了——每行会各自计算交叉轴尺寸，行与行之间不联动。
立即学习“前端免费学习笔记（深入）”；
- 两列布局+换行？用
display: grid; grid-template-columns: 1fr 1fr才能保证所有项目统一高度 - flexbox 的
align-items作用域仅限当前 flex 行（或列），这是理解其能力边界的最关键点 - 不要试图用
flex-direction: column+align-items: stretch实现“多行等宽”，那是主轴/交叉轴角色互换，和原问题无关
拉伸机制看着简单，但真正容易忽略的是：它只在“未受约束”的子项上生效，而日常开发中各种隐式 height、min-height、display 类型切换，都会悄悄关掉这个开关。
