align-items: stretch 默认生效但常因子元素设 height/min-height 或内容限制而失效；容器无明确高度时 align-items 无对齐空间；ie11 存在兼容问题，建议用 table-cell 或 margin: auto 替代。
align-items: stretch 是默认行为，但经常失效？
Flex容器默认的 align-items 值就是 stretch，按理说子元素应该自动撑满容器高度——但实际中常看到子项高度参差不齐。根本原因不是属性没生效，而是子元素自身设置了 height、min-height、max-height，或内部内容触发了最小高度限制（比如图片、行内块、表格等）。
实操建议：
- 先检查子元素是否显式写了
height或min-height，删掉或改为auto - 如果子元素是
<img>，它默认是inline，会受基线对齐和行高影响，加vertical-align: top或设为display: block - 含文字的子项若内容过少，可能因
line-height或padding导致视觉高度不一致，用box-sizing: border-box统一计算方式
align-items: center / flex-start 为什么有时“没反应”？
这个现象多出现在 Flex 容器本身高度未明确设定时。例如父容器是 div 且没有设置 height 或 min-height，那么整个 Flex 容器高度由子项内容撑开，align-items 就失去了“可对齐的空间”。它不是失效，而是没空间可对齐。
实操建议：
- 确保 Flex 容器有明确高度来源：固定值（
height: 300px）、视口单位（min-height: 100vh）、或被其他布局约束（如绝对定位 + top/bottom） - 避免仅靠
flex: 1在无高度上下文的父级中“撑高”，它只在主轴方向有效，交叉轴仍需高度基础 - 调试时临时加
border: 1px solid red看容器真实尺寸，比猜更可靠
子元素设了 height 后 align-items 还起作用吗？
起作用，但效果被覆盖。当子元素明确设置了 height（非 auto），align-items: stretch 就不再强制拉伸它；而 center 或 flex-end 依然会按该固定高度做居中或贴边对齐——只是你看到的“没对齐”，其实是子项高度不一致导致的错觉。
实操建议：
- 若需统一高度+居中内容，优先让子项高度由 Flex 控制（即不设
height），再用display: flex; flex-direction: column; justify-content: center居中内部内容 - 若必须限定子项高度（如卡片固定高），就统一所有子项的
height值，再配合align-items: center对齐它们的位置 - 注意
box-sizing：设height: 200px但含padding: 20px时，实际内容区只剩 160px，视觉上仍可能不对齐
IE11 下 align-items 不兼容的典型表现与绕过方式
IE11 对 align-items 的支持有缺陷：当子元素是 flex 容器自身，或含 position: absolute 子项时，stretch 行为常失效；center 在某些嵌套场景下也会偏移。
实操建议：
- 避免在 IE11 中依赖
align-items实现关键布局，改用display: table-cell; vertical-align: middle包裹内容（需外层display: table） - 若坚持用 Flex，给子元素加
margin: auto可替代align-items: center（仅适用于单个子项或需手动控制） - 不要用
align-items: baseline，IE11 实现极不稳定，视觉偏差大
真正难的不是写对属性，而是判断当前高度是否真的由 Flex 控制——很多“对齐失败”问题，根源在父容器高度不可控，或子元素悄悄锁死了自己的尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
