盒模型是元素固有结构基础，flex布局是在其上定义子元素排列方式；flex项目仍遵循完整盒模型，box-sizing决定尺寸计算逻辑，flex属性仅影响content区拉伸收缩，容器自身也遵守盒模型规则。
盒模型和弹性盒子不是互斥关系，而是底层与上层的关系：盒模型是每个元素固有的结构基础，flex布局是在这个基础上对子元素排列方式的重新定义。只要一个元素存在，它就一定遵循盒模型；而一旦它被设为 display: flex，它就成了弹性容器，它的子元素就进入 flex 布局上下文——但每个子元素自身依然有完整的 margin、border、padding、content 四层结构。
盒模型在 flex 项目中照常生效
flex 项目（即弹性容器的直接子元素）仍然是普通盒子，它们的尺寸计算完全依赖 box-sizing 设置：
- 默认
box-sizing: content-box：你写的width: 200px只指内容区宽；加上padding: 10px和border: 2px后，实际占用宽度变成 224px（200 + 2×10 + 2×2） - 推荐用
box-sizing: border-box：此时width: 200px指的是“边框盒总宽”，padding 和 border 会向内压缩内容区，总宽不变 - margin 始终在最外层，flex 布局会尊重它，但不会让 margin 参与主轴空间分配（比如
justify-content不会把 margin 算进“间距”里）
flex 属性如何影响盒模型的尺寸表现
flex 项目自身的宽高可由传统方式（width/height）设定，也可交由 flex 系统动态控制。这时盒模型各部分的“行为权重”发生变化：
-
flex-basis相当于项目的“初始主轴尺寸”，它会替代width（主轴为水平时）或height（主轴为垂直时）参与计算，但 padding/border/margin 仍按盒模型叠加 -
flex-grow和flex-shrink决定项目是否拉伸或收缩——拉伸时，增长的是 content 区域，padding 和 border 保持原有比例不变 - 若项目没设
height且align-items: stretch（默认），它会在交叉轴方向拉满容器高度，此时padding和border依然计入最终占用空间
flex 容器本身也遵守盒模型
别忘了弹性容器自己也是个盒子，它的尺寸、内外边距、边框同样走标准盒模型：
立即学习“前端免费学习笔记（深入）”；
- 容器的
width和height是它的 content 区大小（除非设了box-sizing: border-box） - 容器的
padding会形成“内边距区域”，flex 项目默认从 padding 内边缘开始排列（即不贴着边框） - 容器的
margin控制它与其他元素的距离，不影响内部 flex 项目的布局逻辑 - 容器的
border是视觉边界，但不参与 flex 计算——项目不会“避开”border，而是从 border 内侧开始排布
常见误区澄清
几个容易混淆的点：
-
flex 不改变盒模型规则，只改变子元素的排列逻辑：设置
display: flex后，子元素的 float、vertical-align、clear 全部失效，但 margin/padding/border/content 的层级和计算方式一丁点没变 - justify-content 和 align-items 不作用于盒模型尺寸，只控制位置：它们调整的是项目整体（含 margin）在主轴/交叉轴上的对齐起点，不缩放也不裁剪任何盒模型部分
- 外边距合并（margin collapse）在 flex 容器内不发生：因为 flex 项目不属于常规流中的块级上下文，父子或兄弟间的 margin 不会合并，各自独立生效
