flex容器的padding会撑大width，但仅在box-sizing: content-box（默认）下发生；它不改变justify-content/align-items对齐逻辑，但压缩可用空间；gap仅作用于子项间，不能替代padding。
Flex容器的padding会撑大width吗
会，但只在box-sizing: content-box（默认）下发生。这是最常被误以为“Flex搞坏了布局”的根源。
- Flex容器本身仍是普通块级元素，
padding、border默认计入总宽高 - 除非显式设
box-sizing: border-box，否则width: 300px+padding: 20px= 实际占位340px - 这个行为和Flex无关——换成
div也一样，别甩锅给display: flex
子项margin负值能抵消padding吗
能，但属于“修修补补”，不是设计意图。容易在响应式或动态内容下失效。
-
margin-left: -20px可视觉上拉回被padding推开的子项，但破坏了盒模型语义 - 当子项用
flex-wrap: wrap换行时，负margin可能让首行末项错位 - 更稳妥的做法是：把padding从容器移到第一个/最后一个子项的
margin上（需配合:first-child/:last-child）
padding与justify-content/align-items的协作关系
padding是“容器内边距”，不影响主轴/交叉轴对齐逻辑，但会压缩可用对齐空间。
-
justify-content: center是在“扣除padding后的内部区域”里居中，不是整个盒子宽度 - 如果容器
padding: 20px，且子项总宽刚好填满width - 40px，那center看起来就像没生效 - 调试时可临时加
outline: 1px solid red看容器真实边界，比猜强
用gap替代padding的适用边界
gap只作用于子项之间，不能替代容器自身padding；但它能避免“padding干扰对齐”的陷阱。
立即学习“前端免费学习笔记（深入）”；
- 想让子项间有空隙？优先用
gap: 12px，而非给每个子项加margin - 想让内容离容器边缘有空隙？必须用
padding，gap对此无效 - IE不支持
gap（哪怕Flex已支持），若需兼容，仍得回归margin或padding方案
Flex容器的padding本质就是普通盒模型padding，它不神秘，也不特殊。真正容易翻车的，是边写边忘掉box-sizing这行代码，以及把“视觉留白”和“布局留白”混为一谈。