css:flex:1;是谁的缩写

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;自定义伸缩比例和初始尺寸
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值