css:flex:1;是谁的缩写
flex-grow:1;放大
flex-shrink:1;缩小
flex-basis: 0%;初始大小
flex: 1;
实际上是以下三个属性的组合:
flex-grow: 1
定义项目的放大比例(当容器有剩余空间时,该项目会按比例分配剩余空间)。
值为
1
表示该项目会与其他flex-grow
为1
的项目均分剩余空间。
flex-shrink: 1
定义项目的缩小比例(当容器空间不足时,该项目会按比例收缩)。
值为
1
表示该项目会与其他项目等比例收缩。
flex-basis: 0%
定义项目在分配多余空间之前的初始大小。
0%
表示忽略项目的原始尺寸(如width
),直接按flex-grow
分配空间。
对比其他常见缩写
缩写形式 | 等效属性 | 用途说明 |
---|---|---|
flex: 1; | flex-grow: 1; flex-shrink: 1; flex-basis: 0%; | 项目均分剩余空间,忽略初始尺寸 |
flex: auto; | flex-grow: 1; flex-shrink: 1; flex-basis: auto; | 项目按内容大小分配剩余空间 |
flex: none; | flex-grow: 0; flex-shrink: 0; flex-basis: auto; | 项目不可伸缩,保持原始尺寸 |
flex: 2 1 100px; | flex-grow: 2; flex-shrink: 1; flex-basis: 100px; | 自定义伸缩比例和初始尺寸 |