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;。