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; | 自定义伸缩比例和初始尺寸 |

3390

被折叠的 条评论
为什么被折叠?



