上海做高端网站制作服务公司商标

flex-grow:1;放大

flex-shrink:1;缩小

flex-basis: 0%;初始大小

flex: 1; 实际上是以下三个属性的组合：

1. flex-grow: 1

   • 定义项目的放大比例（当容器有剩余空间时，该项目会按比例分配剩余空间）。

   • 值为 1 表示该项目会与其他 flex-grow 为 1 的项目均分剩余空间。

2. flex-shrink: 1

   • 定义项目的缩小比例（当容器空间不足时，该项目会按比例收缩）。

   • 值为 1 表示该项目会与其他项目等比例收缩。

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