flex子元素不撑满高度，主因是父容器未设显式高度；需确保父容器有可计算高度（如100vh）、子元素未设固定height、ie11中优先用flex:1而非align-items:stretch。
flex子元素高度不撑满，先看父容器是否设了height
Flex布局里子元素不撑高，90%是因为父容器没显式定义高度。flex本身不改变父容器的尺寸计算逻辑——它只负责分配空间，不负责“生成”高度。如果父容器是height: auto（比如普通div），那它高度由内容撑开；内容又没高度，就塌陷了。
- 父容器必须有可计算的高度来源：比如
height: 100vh、height: 400px，或继承自一个已有高度的祖先 - 不要依赖
min-height来“触发”子项撑满，min-height只限制最小值，不提供弹性基础 - 检查是否被
overflow: hidden或position: absolute等样式意外截断了渲染区域
align-items: stretch 默认生效，但会被子元素自身height/margin干扰
align-items: stretch是flex容器默认值，理论上会让子项在交叉轴（垂直方向）拉伸填满。但它有个前提：子元素不能有固定的height、max-height或margin抵消拉伸。
- 子元素写了
height: 200px？拉伸失效，它就卡死在200px - 子元素设置了
margin: auto？可能让浏览器放弃stretch逻辑 - 子元素是
img或video？它们自带固有宽高比，需加height: 100%并确保父级能传递高度
示例：
.container { display: flex; height: 300px; }
.item { background: #eee; } /* 没设height → 自动stretch */
.item.fixed { height: 100px; } /* 设了height → 不再stretch */
flex-direction: column 下，子项撑高需要 align-self 或 min-height 配合
竖排布局时，主轴变垂直，交叉轴变水平——此时align-items控制的是水平对齐，而“撑满高度”的责任落到justify-content或子项自身。
justify-content: stretch不存在，别指望它正确做法是让子项用
height: 100%或flex: 1主动占位如果只有一个子项想撑满，直接
flex: 1最稳；多个子项需按比例分配，就用flex: 1、flex: 2等flex: 1本质是flex-grow: 1; flex-shrink: 1; flex-basis: 0，从零开始分剩余空间单纯写
height: 100%可能无效，因为百分比高度依赖父级有明确高度，且父级得是flex容器而非block
IE11下flex子项高度异常，别信align-items: stretch
IE11对align-items: stretch的支持有严重bug：当子元素含border、padding或box-sizing: border-box时，拉伸常失效或错位。
- 最可靠解法：给子元素显式加
height: 100%，并确保所有父级（包括html、body）都有height: 100% - 避免在IE11中依赖
flex-basis: auto，改用flex-basis: 0配合flex-grow - 不要用
margin: auto居中+拉伸组合，IE11会直接忽略
实际项目里，只要父容器高度确定、子元素没锁死height、IE兼容性有要求——优先用flex: 1而不是赌align-items的稳定性。
真正卡住的点往往不在flex属性本身，而在高度链路上某一级悄悄变成了auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
