Flex布局下盒模型结构未变，但子元素宽高不再直接决定占用空间，而是由flex-basis、flex-grow、flex-shrink共同计算；height:100%失效主因是父容器无明确高度；padding/border仍影响尺寸，推荐box-sizing:border-box。
flex 布局下盒模型本身没变，但尺寸计算逻辑被接管了
盒模型的结构（content + padding + border + margin）完全没变，box-sizing、padding、border 依然生效，也照样参与最终渲染尺寸。变的是：**子元素的 width/height 不再直接决定它在主轴/交叉轴上的占用空间**——这个决定权交给了 flex 引擎。
-
width: 200px在普通流中 = 元素内容区宽 200px，总宽 = 200 + 左右 padding + 左右 border - 在
display: flex容器里，它只是flex-basis的默认 fallback 值，实际尺寸由flex-basis、flex-grow、flex-shrink共同算出 - 如果没设
flex相关属性，浏览器按flex: 0 1 auto处理，即“不伸展、可收缩、基准尺寸看内容”，此时写的width很可能被忽略
为什么 height: 100% 在 flex 容器里经常失效
根本原因不是盒模型变了，而是父容器没有明确的高度基准。height: 100% 是相对父元素计算的，而 display: flex 的容器默认 height: auto，且不会自动撑高 —— 它只管排列，不管“包住”子项。
- 父容器没设
height或min-height，子项写height: 100%就等于除以 0，结果是无效值 - 想让子项填满高度？要么给父容器加
height: 400px或min-height: 100vh，要么让子项自己拉伸：flex: 1或flex-grow: 1 - 注意：即使父容器有高度，若子项设了
flex-shrink: 0且内容超长，仍可能溢出，此时需配合min-height: 0或overflow: hidden
padding 和 border 怎么影响 flex 子项尺寸
它们照常增加元素总尺寸，且会被计入 flex-basis 和伸缩计算中 —— 也就是说，flex-basis: 200px 指的是“内容区宽 200px”，加上 padding/border 后，主轴实际占位 > 200px；而 flex-grow 是在包含 padding/border 的总尺寸上做拉伸的。
- 推荐统一加
box-sizing: border-box，这样width: 200px就真等于总宽 200px，避免计算偏差 - 全局重置写法：
* { box-sizing: border-box; }（伪元素需单独补::before, ::after { box-sizing: border-box; }） -
margin不参与 flex 伸缩计算，但会影响对齐和间距；margin: auto在 flex 中可用于精准推边或居中，这是普通流做不到的
常见尺寸失控现象与修复方式
你调了半天宽度不对、高度塌陷、子项被莫名压缩，大概率是 flex 尺寸规则和传统直觉冲突导致的。
立即学习“前端免费学习笔记（深入）”；
-
现象：并排两个
div，各设width: 50%，却换行了 → 原因：padding和border在content-box下额外加宽 → 修复：加box-sizing: border-box -
现象：父容器设了
height: 300px，子项设height: 100%还是不顶满 → 原因：子项是 flex item，默认align-items: stretch，但若它有flex: none或flex-shrink: 0且内容短，就不会拉伸 → 修复：删掉干扰 flex 属性，或显式写flex: 1 -
现象：文字过长撑爆容器，
flex-shrink: 1不生效 → 原因：flex item 默认min-width: auto，会阻止收缩 → 修复：加min-width: 0（对图片/文本容器都有效）
flex 的尺寸逻辑不是“替换”盒模型，而是“叠加一层调度层”。真正容易被忽略的，是它把原本由文档流隐式完成的尺寸协商，变成了显式可控但必须理解的 flex 属性组合。写错一行 flex，就可能让整个布局“看起来像坏了”，其实只是规则没对上。
