flex-direction: column时子元素不拉伸，根本原因是align-items: stretch只控制交叉轴（此时为宽度）拉伸，而高度需靠flex: 1等主轴伸缩属性实现，且父容器必须有明确高度。
flex-direction: column 时子元素不拉伸？先看 flex 缩写是否写对
主轴为 column 时，子元素默认不会撑满容器高度——这不是 bug，而是 flex 默认行为：弹性项只在主轴方向有“伸缩性”，但需显式声明。常见错误是只写了 display: flex 和 flex-direction: column，却忘了给子元素设 flex 值。
关键点：flex 是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为 0 1 auto，即“不增长、可收缩、按内容定高”。主轴是垂直方向时，要拉伸就得让 flex-grow > 0。
-
flex: 1最常用：等价于flex: 1 1 0，强制子项在主轴（此时是高度）上拉伸填满剩余空间 -
flex: 1 0 0更稳妥：禁止收缩（flex-shrink: 0），避免某些场景下被压缩 - 多个子项都设
flex: 1，会均分剩余高度；设flex: 2和flex: 1，则按 2:1 分配
为什么 align-items: stretch 对纵向主轴无效？
align-items: stretch 只作用于交叉轴。当 flex-direction: column 时，交叉轴是水平方向（x 轴），所以它控制的是子元素的宽度拉伸，不是高度。想让子元素在垂直方向（主轴）拉伸，必须靠 flex 属性，而不是对齐属性。
容易混淆的点：
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制主轴（此时是 y 轴）对齐，比如justify-content: center是垂直居中，但它不改变高度，只是挪位置 -
align-items: stretch在column下会让所有子项宽度撑满容器，但高度仍由内容或flex决定 - 单个子项想单独拉伸？用
align-self: stretch无效——它只影响交叉轴（即宽度），仍需靠flex
容器没设高度，子元素 flex: 1 也不拉伸？
Flex 项的拉伸依赖于容器在主轴方向上有明确尺寸。如果父容器高度未定义（比如只有 min-height 或完全靠内容撑开），flex: 1 就找不到“剩余空间”可分，结果就是不拉伸。
实操建议：
- 给容器加
height: 100vh、height: 400px或min-height: 100vh（视需求而定） - 若容器嵌套在另一个 Flex 容器中，确保上级也传递了高度约束（例如上级也设了
flex: 1） - 用
height: 100%前确认所有父级都有明确高度，否则无效
用 flex: 1 拉伸后内容溢出？检查 flex-shrink 和 min-height
拉伸太狠导致文字换行错乱、图片变形、滚动条意外出现，往往是因为 flex-shrink: 1（默认）允许压缩，而内容本身有最小尺寸约束。
典型表现：
- 文本块被压扁、字重异常，可能是
white-space: nowrap或字体尺寸过大 - 图片被强行缩放，加
max-height: 100%或object-fit: contain限制 - 想保底高度？给子项加
min-height: 60px（数值按需），它会优先满足最小高度，再分配剩余空间 - 彻底禁用压缩：用
flex: 1 0 auto或flex: 1 0 min-content
真正卡住的地方，往往不是 flex 写错了，而是容器高度没锚定、子项最小尺寸没兜底、或者误把对齐当拉伸用了。
