css flex 布局下盒模型规则会变吗_从尺寸计算是否改变进行说明_技术教程

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-heig ht: 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（对图片/文本容器都有效）