最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3 flex-shrink属性用法详解
时间：2022-06-25 13:43:54 编辑：袖梨 来源：一聚教程网
flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。
flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，flex items们根据自身的flex-basis值做相应调整。
看一个示例：
| 代码如下 | 复制代码 |
汇成一道道光的流河 我曾在天上见过地的繁华 |
|
在上面的代码中，flex container宽度为250px，而两个flex item宽度加起来有350px，所以要腾100px空间出来。
计算的方式是，每个flex item的flex-basis值乘以flex-shrink值求积，求和所有flex items的乘积，然后求占比，再乘以要腾出的空间。
| 代码如下 | 复制代码 |
| .example-first: (150 * 1) / ((200 * 1) + (150 * 1)) * 100 = 42.8571428571 .exampel-last: (200 * 1) / ((200 * 1) + (150 * 1)) * 100 = 57.1428571429 |
|
所以.example-first的宽度为150 – 42.8571428571 = 107px，.example-last的宽度为200 – 57.1428571429 = 143px。
相关文章
- 英雄联盟手游芮尔怎么连招-熔铁少女连招技巧 09-18
- 禁闭求生2怎么做蝴蝶长袍 蝴蝶长袍制作方法 09-18
- 地狱即我们无人机怎么升级 模块安装与技能解锁指南 09-18
- 无主之地4圣城终点区玉米卷饼在哪 圣城终点区玉米卷饼收集攻略 09-18
- 禁闭求生2蝴蝶头箍怎么做 蝴蝶头箍制作攻略 09-18
- 我的休闲时光1月优家风尚新衣服有哪些-1月优家风尚新增服饰一览 09-18