必须为html和body显式设置height: 100%或100vh，否则仅父容器设height: 100vh会导致子元素塌陷；全屏布局中优先用flex: 1而非height: 100%传递高度，移动端建议用100dvh替代100vh。
Flex全屏布局必须设height: 100vh，但别只设在容器上
只给display: flex的父容器加height: 100vh，子元素依然可能塌陷——因为flex项目默认不继承高度，且html和body本身没撑满视口。
-
html和body都要显式设height: 100%或100vh，否则100vh在某些浏览器里会失效 - 如果父容器是
div而非根元素，确保它没有被其他样式（比如max-height、overflow）截断高度 - 移动端Safari对
100vh有兼容问题：地址栏收放时高度会错乱，此时更稳妥的是用100dvh（需检查目标环境支持）
flex-direction决定主轴方向，但全屏布局常要配合flex-wrap和align-items
单靠flex-direction: column不能自动让内容垂直居中或填满剩余空间；主轴方向定了，交叉轴的行为还得单独控制。
-
flex-direction: column时，justify-content控制垂直方向（主轴），align-items控制水平方向（交叉轴） - 想让中间区域自适应撑开，得用
flex: 1，不是flex: auto或flex: initial——后者不会拉伸 - 避免误用
flex-wrap: wrap：全屏单页布局通常不需要换行，开了反而可能触发意外折行
常见错误：min-height: 100vh vs height: 100vh
用min-height看似更安全，但flex容器下它往往达不到“全屏”效果——子元素仍可能无法占满视口，尤其当内容少于一屏时。
-
height: 100vh强制容器等于视口高，适合严格全屏场景（如登录页、仪表盘首页） -
min-height: 100vh适合内容可滚动的页面，但要注意：若子元素用了flex: 1，它会按剩余空间计算，而min-height不提供“剩余空间”的基准 - 调试时可临时加
outline: 1px solid red看容器是否真占满，别只信开发者工具里的尺寸估算
嵌套Flex时，height: 100%容易失效，优先用flex: 1
在多层flex容器中，用height: 100%逐级向下传高度，极易在某一层断掉——百分比高度依赖父级有明确高度，而flex项目默认不触发这个依赖链。
- 外层设
display: flex; height: 100vh后，直接给需要撑满的子项设flex: 1，比写height: 100%可靠得多 - 如果子项是另一个flex容器，它内部也要重复这套逻辑：设
display: flex+flex: 1，而不是指望height: 100%穿透 - 注意
flex: 1等价于flex: 1 1 0，其中flex-basis: 0是关键——它让分配从零开始，避免内容尺寸干扰拉伸
flex-direction写错，而是html/body没设高，或者嵌套里混用了height: 100%和flex: 1。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
