flex 属性

本文介绍了CSS弹性布局中的flex-grow属性,它是子元素在空间剩余时的放大比例;flex-shrink属性则规定了空间不足时的缩小比例;而flex-basis定义了弹性盒项目的基准值,用于计算分配空间。这三个属性共同决定了弹性元素在容器中的尺寸调整方式。
摘要由CSDN通过智能技术生成

flex-grow属性:子元素的放大比例(子项宽度和<父盒子宽度的时候)

  - 属性值为数值,没有单位,默认值为0,表示不放大

  - 负值对该属性无效

  - 可以为小数

  - 注意:当容器有剩余空间时有效

flex-shrink属性:子元素的缩小比例(子项宽度和>父盒子宽度的时候)

  - 属性值为数值,没有单位

  - 默认值为1,表示当空间不足时,等比例缩小

  - 属性值为0,表示当空间不足时,不缩小

  - 负值对该属性无效

- 可以为小数

flex-basis

- 定义弹性盒项目基准值(即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值)

- 取值

  - auto    默认值

  - 长度值 【一个长度单位或者一个百分比】

- 注意:与项目的宽、高同时存在时,flex-basis的优先级高于宽、高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值