Flex容器子元素侧轴未撑满，主因是align-items: stretch被覆盖或失效；需确保父容器为flex、子元素无固定宽高及align-self覆盖，且替换元素设height: auto等。
Flex容器中子元素在侧轴（cross axis）没有撑满，通常是因为默认的 align-items: stretch 被覆盖或失效了。只要确保条件满足，它就能让子元素自动拉伸填满侧轴空间。
确认父容器是flex且侧轴方向正确
align-items 作用于 flex 容器，控制子项在侧轴上的对齐方式。必须保证：
- 父元素设置了 display: flex 或 display: inline-flex
- 子元素没有设置固定高度（如 height、min-height）或 align-self: flex-start/center/etc. 覆盖了 stretch 行为
- 侧轴方向由 flex-direction 决定：row 时侧轴是垂直方向（y轴），column 时侧轴是水平方向（x轴）
避免子元素“自我限制”拉伸
align-items: stretch 默认生效，但以下情况会阻止拉伸：
- 子元素设置了 height 或 min-height（row 方向时）
- 子元素设置了 width 或 min-width（column 方向时）
- 子元素显式写了 align-self: flex-start 等值，覆盖了 inherit 的 stretch
- 子元素是替换元素（如 img），且未设置 height: auto 或 max-height: none
需要撑满但内容又不能溢出？加个包裹层
如果子元素本身有 padding/margin/border 或内部内容影响视觉“撑满”，可嵌套一层：
立即学习“前端免费学习笔记（深入）”；
- 外层 flex 子项保持无宽高限制，靠 align-items: stretch 拉伸
- 内层 div 设置 width: 100%; height: 100%；再放内容，避免边界干扰
- 适合卡片、按钮、表单项等需要背景填满又内容居中的场景
基本上就这些。align-items: stretch 是 flex 的默认行为，不是“要加上才有效”，而是“别不小心把它弄没了”。
