shorthand · 语法

flex 简写：一个值如何展开成三个

日常写的 flex: 1 / flex: auto / flex: none 都是简写，背后恒定展开为三个全写属性 flex-grow flex-shrink flex-basis。关键字写法各自展开成什么、单值与双值如何分派、为什么 flex: 1 的 basis 是 0% 而非 0——这些细节决定了 item 最终如何分配空间。下面切换写法，用 getComputedStyle 实测浏览器真正展开出的三个值。

三个全写的默认值（即 flex 的初始值 flex: initial = 0 1 auto）：

flex-grow: 0——默认不瓜分剩余空间；
flex-shrink: 1——默认可在空间不足时收缩；
flex-basis: auto——默认主轴初始尺寸取自 width / 内容。

1 · 切换写法，实测展开值

三个 item 文字长短不同。施加同一个 flex 简写后，观察它们如何分配主轴空间，底部回显的是 getComputedStyle 拿到的真实展开值（注意 flex: 1 的 basis 实测为 0%），右侧映射表会高亮当前命中的展开规则。

flex: 1 的 basis 是 0%，不是 0。 规范规定 flex: <number> 的 basis 应为 0（绝对长度），但各浏览器实际用 0%（百分比）。二者在多数布局里等价，却在容器主轴尺寸不确定时分道扬镳——0% 会解析回 content，导致初始尺寸不再为零。这一差异留到 flex-basis 一页用实测展开。

2 · 怎么选

想要的效果	写法	为什么
多个项等分容器，忽略各自内容宽度	`flex: 1`	basis `0%` 抹平起点，grow 等比例分配全部空间。
瓜分剩余空间但保留内容比例	`flex: auto`	basis `auto` 先按内容定起点，再分配多出的空间。
固定尺寸、既不伸也不缩	`flex: none`	grow/shrink 皆 0，锁死在内容（或 `width`）尺寸。
给定起始宽度、允许伸缩	`flex: 100px`	等价 `1 1 100px`，从 100px 出发自适应。