定义和用法
flex属性是flex-grow, flex-shrink 和 flex-basis的简写
默认值为 0 1 auto,该属性有两个快捷值auto(1 1 auto)和none(0 0 auto)
用于设置或检索弹性盒模型对象的子元素如何分配空间
前端面试css的过程中,常常会被问道flex属性的相关问题,比如列出两个有flex属性值的子盒子,考察你知不知道其中的宽度变化原理。本文将先介绍flex的基本属性,便于读者理解。苦于作者才疏学浅,网上找到的方法都看得一知半解,只得按图索骥,慢慢摸索,文末将介绍作者自己归纳的计算方式贴出,供交流学习。
flex-grow
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
语法
flex-grow: number|initial|inherit;
值 | 描述 |
---|---|
number | 一个数字,规定项目相对于其他灵活的项目进行扩展的值,默认值是0 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将变小
语法
flex-shrink: *number*|initial|inherit;
值 | 描述 |
---|---|
number | 一个数字,规定项目相对于其他灵活的项目进行收缩的值,默认值是1 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
flex-basis
flex-basis属性用于设置或检索弹性盒伸缩基准值
语法
flex-basis: *number*|auto|initial|inherit;
值 | 描述 |
---|---|
number | 一个长度单位或者一个百分比,规定灵活项目的初始长度 |
auto | 默认值。长度等于灵活项目的长度。如果项目未指定长度,则长度将根据内容决定 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
子元素合计大于父元素时flex属性处理的方法
本人总结的方法以公式形式给出,如有疑问之处欢迎在评论区批评指出。
flex-grow
设父盒子fatherwidth为w
给第一个子盒子box1添加如下属性flex: x1 0 z1
给第二个子盒子box2添加如下属性flex: x2 0 z2
则第一个盒子的长度width1就为: z1 + x1 / (x1 + x2) * (w - (z1 + z2))
第二个盒子的长度width2为: z2 + x2 / (x1 + x2) * (w - (z1 + z2))
flex-shrink
设父盒子fatherwidth为w
给第一个子盒子box1添加如下属性flex: 0 y1 z1
给第二个子盒子box2添加如下属性flex: 0 y2 z2
则第一个盒子的长度width1为: z1 - ((z1 + z2) - w) * (y1 * z1) / ((y1 * z1) + (y2 * z2))