当使用 flex: 1 时，元素不会自动分配其内部的 padding 空间。这是因为 flex: 1 主要用于控制元素在容器中的大小，而不是直接影响元素内部的布局属性，如 padding。flex: 1 实际上是一个快捷方式，等同于 flex-grow: 1，它指定了元素应占据多大的剩余空间，但并不包括 padding 在内。
原因分析
- Flexbox 计算机制：根据 Flexbox 的设计原则，
flex-grow、flex-shrink和flex-basis这三个属性共同决定了元素的大小。flex-grow控制了元素在分配剩余空间时的比例，但这个比例是基于元素本身的内容大小而非包含padding的总大小[3]。 - Padding 不参与 Flexbox 布局：Flexbox 的计算机制规定，元素的可用空间需要从容器的总空间中扣除
margin、border和padding后得到。如果padding被视为元素的一部分，那么 Flexbox 将无法正确地计算出剩余空间，从而影响布局的均衡[2]。
解决方案
如果你的目标是让 padding 也参与到 Flexbox 的空间分配中，你可以采取以下几种策略：
- 使用额外的包裹元素：在需要添加
padding的元素周围添加一个额外的包裹元素，并将padding应用于这个包裹元素，而不是直接在 Flexbox 元素上设置。这样，padding就不会影响 Flexbox 元素的大小分配了。
<div style="display: flex;">
<div style="flex: 1; padding: 10px;">Content 1</div>
<div style="flex: 1; padding: 10px;">Content 2</div>
</div>
- 使用
box-sizing: border-box：虽然这不会改变padding参与 Flexbox 分配的行为，但它确保了元素的总体大小（包括content、padding和border）不会超过其定义的width或height。这对于保持布局的一致性非常有用。
.element {
box-sizing: border-box;
}
- 手动调整
flex-basis：如果你知道每个元素的padding大小，可以通过调整flex-basis来尝试平衡布局。但这种方法可能需要更多的手动调整，并且在响应式设计或动态内容变化的情况下可能不太实用。
总之，flex: 1 不会自动分配 padding 是由 Flexbox 的设计决定的，如果需要 padding 参与布局，可以通过额外的包裹元素或者调整布局策略来实现。
Citations: [1] www.jianshu.com/p/6d6847fad… [2] segmentfault.com/q/101000003… [3] developer.mozilla.org/zh-CN/docs/… [4] segmentfault.com/a/119000000… [5] www.cnblogs.com/erduyang/p/… [6] developer.mozilla.org/zh-CN/docs/… [7] developer.mozilla.org/zh-CN/docs/… [8] www.cnblogs.com/juliazhang/… [9] blog.csdn.net/jjw_zyfx/ar… [10] blog.csdn.net/Hr_ving/art…
