使用 display: flex 和 box-sizing: border-box 可提升布局可控性，前者实现灵活对齐与空间分配，后者确保宽度包含内边距和边框，避免溢出与计算偏差，组合使用可有效防止元素换行或错位，使响应式设计更稳定高效。
使用 display: flex 和 box-sizing 能显著提升 CSS 布局的可控性和一致性，尤其是在处理复杂或响应式盒模型时。这两个属性配合使用，可以避免常见的布局问题，比如元素溢出、宽度计算偏差和对齐错乱。
box-sizing: border-box 统一尺寸计算
默认情况下，CSS 盒模型使用 content-box，这意味着设置的 width 和 height 只包含内容区域，不包括 padding 和 border。这容易导致实际占用空间超出预期。
通过设置：
*, *::before, *::after {box-sizing: border-box;
}
所有元素的 width 和 height 将包含 content、padding 和 border，使布局更直观。例如，一个宽度为 200px 的盒子，即使添加了 padding: 10px 或 border: 2px，也不会超出 200px。
立即学习“前端免费学习笔记（深入）”；
display: flex 实现灵活容器布局
将父容器设为 display: flex 后，子元素会自动沿主轴排列，无需浮动或定位就能实现对齐与分布。
常见用法：
-
水平/垂直居中：使用
justify-content和align-items - 等高列布局：flex 子项自动拉伸到相同高度
-
动态分配空间：通过
flex-grow、flex-shrink、flex-basis控制伸缩行为
示例：
.container {display: flex;
gap: 10px;
}
.item {
flex: 1;
padding: 20px;
border: 2px solid #ccc;
}
在这个例子中，每个 .item 会均匀分配可用空间，且 padding 和 border 不会导致总宽溢出容器（前提是已启用 border-box）。
组合使用避免布局偏移
当 flex 项目使用 padding 或 border 但 box-sizing 仍为 content-box 时，实际宽度会超过 flex 分配的空间，造成换行或溢出。
解决方法就是确保：
- 全局设置 box-sizing: border-box
- flex 容器使用 display: flex
- 子项的尺寸计算不会因内边距或边框而失控
这样，无论是否添加 padding 或 border，元素都会在预期内的空间中渲染。
基本上就这些。合理使用 box-sizing 和 flex 布局，能让页面结构更稳定、开发更高效。不复杂但容易忽略细节。
