flex容器高度塌陷是因子元素无块级内容导致高度为0，修复需设min-height；百分比高度需父容器有明确高度；column下应用flex-basis而非height；width:100%需配合flex-shrink:0防压缩。
flex容器高度塌陷：子元素没内容或只含inline元素时
Flex容器自身没有设定 height 或 min-height，且子元素全是空的、纯文本（span）、或仅用 display: inline 元素填充时，容器会“看不见”——表现为高度为0。这不是bug，是CSS规范行为：flex容器默认按内容撑开，而inline内容不参与块级高度计算。
- 常见错误现象：
div设了display: flex，但背景色/边框不显示，开发者工具里看高度确实是0 - 典型场景：写导航栏、卡片布局、表单行，父容器只包了几个
<span></span>或未设置flex-shrink: 0的文本节点 - 最简修复：给容器加
min-height: 1px（比height: 0更安全，避免意外截断）或明确设min-height: 40px等业务所需值 - 注意：不要依赖
align-items: stretch强撑高度——它只对有明确交叉轴尺寸约束的容器生效，无约束时无效
百分比高度在flex上下文中失效：父级没给定高度
写 height: 50% 没反应？不是flex的问题，是CSS百分比高度的通用规则：它必须基于一个**有明确高度值（非auto）的父容器**。flex容器本身若高度是 auto，其子元素的百分比高度就无参照物，直接退化为 height: auto。
- 常见错误现象：子元素写了
height: 80%，但实际高度还是由内容决定；开发者工具中显示计算值为auto - 使用场景：做等高卡片、全屏弹窗内部flex布局、响应式侧边栏
- 关键点：必须向上追溯到某个祖先元素（不一定是直接父级），设
height或min-height，例如html, body { height: 100% }+.container { height: 100vh } - 兼容性提醒：IE11对
vh单位支持不稳定，移动端Safari在地址栏收起/展开时会触发vh重算，建议搭配min-height: 100vh防抖
flex-direction: column 下子项height百分比被忽略
在垂直主轴（flex-direction: column）中，子元素设 height: 60% 通常无效，因为此时主轴是垂直方向，而百分比高度仍试图参考父容器的**高度**——但父flex容器的高度往往仍是 auto，导致参照失效。更隐蔽的是：即使父容器有高度，子项的 height 在column流中优先级低于 flex-basis 和 flex-grow。
- 常见错误现象：列布局里想让某个子项占容器60%高度，结果它被压缩成一行文字那么高
- 正确做法：改用
flex: 0 0 60%（即flex-basis: 60%），并确保父容器有确定高度 - 参数差异：
height是绝对尺寸声明；flex-basis才是在flex布局中真正控制初始尺寸的属性 - 性能提示：频繁修改
flex-basis不会触发重排（相比改height），更适合动画场景
width: 100% 在flex子项中表现异常：受flex-shrink干扰
明明写了 width: 100%，但子元素却窄于父容器？问题常出在 flex-shrink: 1（默认值）上。当父容器空间不足时，flex会按比例压缩所有可收缩子项，width 声明会被覆盖——哪怕你设了100%，它也会被“挤瘦”。
- 常见错误现象：输入框、按钮等表单控件在flex行中变窄，尤其在小屏幕下
- 解决方法：加
flex-shrink: 0，或直接用flex: 0 0 100%锁定不收缩 - 为什么这样做：
flex: 0 0 100%相当于flex-grow: 0; flex-shrink: 0; flex-basis: 100%，三者协同才真正阻止尺寸漂移 - 容易踩的坑：只设
flex-basis: 100%不关flex-shrink，一样会被压缩；只设width: 100%不处理flex属性，在flex上下文中就是“仅供参考”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
