【css基础】flex属性--glow、shrink、basis

448 阅读2分钟

定义和用法

flex属性是flex-growflex-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))