flex: 1 是 CSS 中的一个简写属性，用于设置 Flex 项目的灵活伸缩比例（flex-grow）、收缩比例（flex-shrink）以及基础大小（flex-basis）。具体来说，flex: 1 实际上是以下三个属性的简写：
flex-grow: 1;表示如果容器有剩余空间，则项目将放大。1的值意味着该项目将尝试与其他所有flex-grow值为1的项目等比例地占据剩余空间。flex-shrink: 1;表示如果容器空间不足，则项目将缩小。同样地，1的值意味着该项目将尝试与其他所有flex-shrink值为1的项目等比例地缩小，以避免溢出容器。flex-basis: 0%;（或默认值是auto，但在这个简写中，如果没有明确指定flex-basis，则默认为0%，因为简写中的单个数字值被假定为flex-grow的值，同时flex-shrink默认为1，而flex-basis默认为0%）。flex-basis定义了项目在分配多余空间之前，占据的主轴空间（main size）。这里0%实际上在大多数情况下不太直观，因为大多数时候我们期望的是基于项目内容的大小（即auto），但在这个简写中，如果省略了flex-basis的具体值，则默认行为是0%，然后通过flex-grow来分配额外空间。然而，如果你希望flex-basis是项目内容的大小，你应该显式地写为flex: 1 1 auto;。
因此，flex: 1; 主要是用来告诉 Flex 容器中的项目，如果有剩余空间，它们应该等比例地放大，如果空间不足，它们也应该等比例地缩小，而它们的初始大小（在没有额外空间或需要缩小的情况下）是 0%（尽管这通常不是预期的行为，特别是当你想让项目根据其内容大小开始时）。为了更精确地控制项目的大小和伸缩行为，你可能会想使用更明确的 flex 属性值，比如 flex: 1 1 auto;。
)
