flex: 1 等价于 flex: 1 1 0%，即放大权重为1、收缩权重为1、基准主轴尺寸为0%；其作用轴向由父容器 flex-direction 决定，且 flex-basis 优先级高于同主轴的 width/height。
一、flex: 1 是 flex-grow、flex-shrink 和 flex-basis 的简写组合
flex: 1 并非仅设置放大系数，而是等价于 flex: 1 1 0%，即同时指定三个独立属性：放大权重为 1、收缩权重为 1、基准主轴尺寸为 0%。
1、flex-grow: 1 表示该元素在容器有剩余空间时，按比例参与分配；
2、flex-shrink: 1 表示该元素在容器空间不足时，按比例缩小自身；
3、flex-basis: 0% 表示计算剩余空间前，先将该元素的主轴尺寸视为 0，所有剩余空间由 flex-grow 重新分配。
二、flex: 1 与 flex: auto 的关键差异
flex: 1 的 flex-basis 为 0%，而 flex: auto 等价于 flex: 1 1 auto，其 flex-basis 采用内容自然宽度（或 height），导致剩余空间分配逻辑完全不同。
1、当子元素含文字或固定宽高内容时，flex: auto 会先保留其固有尺寸，再分配剩余空间；
2、flex: 1 则忽略原有尺寸，强制从 0 开始按权重均分主轴可用空间；
3、若容器主轴方向为 row 且子元素无显式 width，flex: 1 会导致所有子项等宽，无论内容长短。
三、flex: 1 在不同主轴方向下的表现
flex: 1 的作用轴向完全取决于父容器的 flex-direction 值，其缩放行为始终作用于主轴，交叉轴不受影响。
1、父容器设为 flex-direction: row 时，flex: 1 控制子元素的 width 分配；
2、父容器设为 flex-direction: column 时，flex: 1 控制子元素的 height 分配；
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
3、若父容器同时设置了 align-items: stretch，子元素在交叉轴上仍可能被拉伸，但这与 flex: 1 无关，属 align-items 的默认行为。
四、flex: 1 与显式设置 width/height 的冲突处理
当子元素同时声明 flex: 1 和 width（或 height）时，flex-basis 优先级高于 width/height，但前提是该维度与主轴一致。
1、主轴为 row 时，width 会被 flex-basis 覆盖，除非使用 flex-basis: auto；
2、主轴为 column 时，height 同理被 flex-basis 覆盖；
3、若在交叉轴上设置 width/height（如 row 方向下设 height），则完全不受 flex: 1 影响，保持原值。
五、flex: 1 在嵌套 Flex 容器中的继承特性
flex: 1 本身不继承，但其作用效果会因父容器是否为 Flex 上下文而显著变化。子元素若自身也是 Flex 容器，其内部布局不受外部 flex: 1 直接控制。
1、外层容器设 display: flex，子项 A 设 flex: 1，则 A 占满外层剩余空间；
2、A 内部也设 display: flex，其子项 B 的尺寸由 A 的尺寸和 B 自身的 flex 属性共同决定；
3、此时 B 的 flex: 1 是相对于 A 的尺寸计算，而非外层容器。
