CSS中flex: 100%的工作原理是什么？为何单值会被识别为flex-basis？

你忽略了flex单值语法的第二条判定规则，单值并非全部默认作为flex-grow处理，会根据值的类型走不同的解析逻辑：

• 若单值为无单位<number>类型：判定为flex-grow的取值，最终解析为 flex: <number> 1 0（flex-shrink默认取值1，flex-basis默认取值0）
• 若单值为带单位的长度值、百分比值类型：判定为flex-basis的取值，最终解析为 flex: 1 1 <length/percentage>（flex-grow默认取值1，flex-shrink默认取值1）

你看到的flex: 50%、flex: 100%中的值属于百分比类型，所以会直接被解析为flex-basis的取值，而非flex-grow，这也是示例中可以用这个写法控制响应式宽度的原因。

附常见解析示例方便对照：

• flex: 2 → 解析为 flex: 2 1 0
• flex: 30% → 解析为 flex: 1 1 30%
• flex: 150px → 解析为 flex: 1 1 150px

内容的提问来源于stack exchange，提问作者S.B