flex-direction: column 不让子元素等高，因它仅定义主轴方向，需配合 flex: 1（含 flex-basis: 0）或显式高度+flex-grow；父容器须有明确高度，子项需设 min-height: 0 防溢出。
Flex-direction: column 为什么没让子元素等高？
因为 flex-direction: column 只决定主轴方向，不自动拉伸子项高度；等分需要配合 flex: 1 或明确设置 height + flex-grow。
- 常见错误现象：
display: flex; flex-direction: column;后，子元素高度仍由内容撑开，顶部堆叠、底部留白 - 正确做法：给每个直接子元素加
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 注意
flex-basis：设为0才能真正均分剩余空间；若用flex: 1 1 auto，可能因内容高度不同导致分配不均 - 兼容性影响：IE10+ 支持
flex: 1，但 IE10/11 对flex-basis: 0解析有偏差，建议加min-height: 0防止溢出
垂直等分时内容溢出容器怎么办？
子项设了 flex: 1 后，内部内容（比如长文本、图片）可能撑破容器，尤其在 flex-direction: column 下更明显。
- 关键原因：
flex: 1分配的是“可用高度”，但子项默认min-height: auto，会优先满足内容最小高度 - 解决方法：给子项加
min-height: 0（或min-height: 0px），强制允许压缩 - 若子项内有滚动需求，再加
overflow-y: auto；否则滚动条可能被截断或不触发 - 别漏掉父容器：必须有明确高度（如
height: 100vh或height: 400px），否则无“剩余空间”可分
用 Grid 替代 Flex 实现垂直等分更简单？
是的，grid-template-rows: 1fr 1fr 1fr 比 Flex 更直观，但适用场景不同。
- 适合固定数量子项：比如三栏导航、四块卡片，写死行数即可；动态数量需配合
repeat(auto-fit, 1fr)，但那是水平流式场景 - Flex 更适合内容驱动布局：比如聊天窗口（头部/消息区/输入框），各区域高度语义不同，用
flex: 2 1 0/flex: 5 1 0更灵活 - 性能差异极小，但 Grid 在 IE 中支持更差（IE10/11 仅支持旧版语法，且无
1fr） - 别混用：同一容器不用同时开
display: grid和display: flex，CSS 不会叠加生效
移动端 Safari 中 vertical-align 失效还影响 Flex 布局？
不影响。但 Safari（尤其 iOS 15.4 之前）对 flex-direction: column + align-items: stretch 的计算有 bug，可能导致子项宽度异常收缩。
- 典型表现：子项内文字换行错乱、按钮变窄、
width: 100%失效 - 临时修复：给子项加
align-self: stretch或width: 100% - 更稳妥做法：避免在 column 布局中依赖子项的隐式宽度，显式设
width: 100%或max-width: 100% - 这个 bug 和
vertical-align无关——它只作用于 inline 元素和 table-cell，Flex 容器里完全无效
事情说清了就结束。真正卡住的往往不是方向选错，而是忘了父容器得有高度、子项得关掉 min-height: auto 这两步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
