flex-item内容尺寸计算疑问：两种flex设置下padding的差异

一、两种场景的本质差异：flex-basis取值与空间分配逻辑 #

1. 场景1：flex: 1 的计算逻辑 #

flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写，结合 box-sizing: border-box，关键规则如下：

• flex-basis: 0% 表示flex项的**初始总宽度（含padding、border）**为0，但flex布局默认有 min-width: auto 规则——flex项的总宽度不能小于其内部最小尺寸（这里中间项的padding为32px，所以最小总宽度是32px）。

• 空间分配步骤：

  1. 先预留所有flex项的最小总宽度：两个无padding项最小为0，中间项为32px，总初始宽度32px。
  2. 剩余可用空间 = 容器宽度600px - 32px = 568px。
  3. 三个项的 flex-grow 都是1，剩余空间被均等分配，每个项分到约189.33px。
  4. 最终每个项的内容宽度：
     • 外侧项：总宽度（0+189.33px）- 0 = 189.33px
     • 中间项：总宽度（32px+189.33px）- 32px = 189.33px
       这就是所有项内容尺寸相等的原因——flex-grow的均等分配抵消了padding的差异，最终内容宽度一致。

  你提到的“逻辑上中间项内容尺寸应为-32px”是忽略了min-width: auto的默认规则，当强制设置min-width: 0时，flex项可被压缩到总宽度0，此时中间项理论内容宽度为0-32px=-32px，但浏览器会自动修正这个非法值，最终内容宽度设为0，同时padding溢出容器，这是极端理论情况，默认不会触发。

2. 场景2：flex-basis: 100% 的计算逻辑 #

当设置flex-basis: 100%时，每个flex项的**初始总宽度（含padding、border）**被设为容器宽度600px，结合box-sizing: border-box和默认flex-wrap: nowrap：

• 三个项初始总宽度总和为600px×3=1800px，远大于容器宽度，若flex-shrink为0（或文章隐含设置），项不会收缩直接溢出；若flex-shrink为1，会触发收缩，但核心逻辑不变：
• flex-basis: 100%直接给每个项设置固定总宽度，padding从总宽度内部扣除：
  • 外侧项无padding，内容宽度=600px - 0 = 600px
  • 中间项有32px padding，内容宽度=600px - 32px = 568px
    因此出现内容尺寸不同的结果——这里flex项宽度由flex-basis直接定义，padding仅在项内部占用空间，不影响全局空间再分配。

二、border-box在两种场景的作用时机差异 #

• 场景1中，border-box作用在最终分配宽度上：flex-grow先分配剩余空间得到总宽度，再用总宽度减去padding得到内容宽度，最终实现内容宽度均等。
• 场景2中，border-box作用在初始flex-basis定义的宽度上：flex-basis直接指定总宽度，padding从总宽度内扣除，内容宽度自然因padding存在而变小。

内容的提问来源于stack exchange，提问作者Rajit Gupta