flex子项padding未被压缩，而是因父容器空间不足和默认flex-shrink:1导致整体缩小，造成视觉局促；需同时设置box-sizing:border-box、flex:0 0 auto和gap才能真正避免。
flex子项的padding为什么会被“压缩”
它其实没被压缩，是视觉错觉——padding本身不会变小，但子项整体宽度被flex-shrink: 1强制缩小后，padding在更窄的空间里显得局促，甚至触发内容换行或溢出，让人误以为“padding塌了”。根本原因还是父容器空间不足 + 子项默认可收缩。
box-sizing: border-box 是必须加的第一步
如果不设box-sizing: border-box，padding会加在width之外，导致实际占用宽度 = width + 左右padding + 左右border。Flex按width分配空间，却不管这额外撑出来的部分，结果就是总宽超限 → 浏览器启动flex-shrink → 整体被压窄 → padding看起来“挤在一起”。
-
box-sizing: border-box让width包含padding和border，从源头消除隐式溢出 - 必须作用在子项上，不是父容器
- 现代浏览器全支持，无需前缀
flex-shrink: 0 或 flex: 0 0 auto 才真正锁住尺寸
只加box-sizing还不够。如果子项仍带flex-shrink: 1（默认值），浏览器在空间紧张时仍会把它连同padding一起等比缩小。要阻止这个行为，得切断收缩逻辑：
- 用
flex-shrink: 0显式禁用收缩（简单直接，适合固定宽高元素） - 更稳妥写法是
flex: 0 0 auto：它同时锁定flex-grow、flex-shrink和flex-basis，且以内容真实渲染尺寸（含padding和border）为基准，优先级更高 - 避免用
flex: 1或flex: auto这类简写，它们可能隐含flex-shrink: 1，覆盖你后面写的flex-shrink: 0
gap 替代 margin，避免 padding 外的“隐形挤压”
很多人把子项间距写成margin-right，但这会导致两个问题：一是margin不参与 Flex 尺寸计算，容易让最后一项多出多余空白；二是margin + padding叠加，进一步放大溢出风险。而gap是 Flex 原生间隙控制，它不增加子项自身尺寸，也不会触发收缩。
- 父容器加
gap: 12px，比每个子项写margin-right: 12px更干净 -
gap对padding无影响，但它能帮你少写一堆margin，减少出错面 - 注意兼容性：
gap在 Flex 中 IE 完全不支持，但所有现代浏览器（Chrome 84+, Firefox 63+, Safari 14.1+）都已稳定支持
padding不被牵连压缩，靠的不是单个属性，而是box-sizing: border-box + flex: 0 0 auto + gap三者协同。漏掉任意一个，都可能在特定宽度下突然失效——尤其是移动端视口变化频繁时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
