flex:1

aabbccQBB

已于 2024-04-28 20:13:26 修改

阅读量1.1k

点赞数 18

CC 4.0 BY-SA版权

文章标签：前端 css javascript

于 2023-12-18 10:58:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44307861/article/details/135039277

1、flex:1,不是单纯的设置flex这个属性的1 1 0%

这是三个关于项目（设置flex布局的父元素下的子元素）属性的简写，分别是：

属性名	flex-grow	flex-shrink	flex-basis
默认值	0	1 ···负值无效 ···flex环境默认是不换行的，即使父容器宽度不够也不会，除非设置flex-wrap来换行	auto
概念	定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大	定义项目的缩小比例，默认为1。即如果空间不足，该项目将缩小	定义了在分配多余空间之前，项目占据的主轴空间（main size）
取值	考虑情况：当父元素有剩余空间时，子元素如何分配父元素的剩余空间	考虑情况：当子元素超出父元素时，子元素如何缩小自己的宽度	---

2、展开说说这三个属性

1）flex-grow

举例：父元素width=400px，子元素A的width=100px，子元素B的width=200px。当A、B元素以不同比例索取剩余空间时，A、B元素的width分别是多少？

剩余空间：400-100-200=100px

A索取剩余空间：设置flex-grow:1，B不索取

A的宽度：100+100=200px

B索取剩余空间：设置flex-grow:1，A不索取

B的宽度：200+100=300px

A,B索取剩余空间，怎么来计算彼此能拿到剩余空间的多少呢？

分配到的剩余空间宽度 = 剩余空间宽度*(自身元素的flex-grow值 / 所有元素的flex-grow值的和)

假设A设置flex-grow:1，B设置flex-grow:2

计算结果是：
A分配到的剩余空间宽度 = 100px * (1/(1+2)) = 33.33px
B分配到的剩余空间宽度 = 100px * (2/(1+2)) = 66.67px

2）flex-shrink

举例：父元素width=400px，子元素A的width=200px，子元素B的width=300px。当A、B元素设置不同的flex-shrink时，A、B元素的width分别是多少？

剩余空间：400-200-300=-100px

A、B都不减小宽度，都设置flex-shrink为0，则有100px超出父元素
A不减小宽度，flex-shrink为0，B减小，flex-shrink为1

B的宽度：300-100=200px

A、B都减小宽度，怎么来计算彼此能拿到剩余空间的多少呢？

分配到的减小宽度 = 超出宽度*（自身宽度*（自身元素的flex-shrink值 / 所有子元素的flex-shrink值 * 自身宽度的和））

假设A设置flex-shrink为3，B设置flex-shrink为2

计算结果：
A减小的宽度 = 100px * （200px * 3/（200 * 3 + 300 * 2））= 50px
B减小的宽度 = 100px * （300px * 2/（200 * 3 + 300 * 2））= 50px

3）flex-basis

flex-basis规定的是子元素的基准值。是否溢出计算与flex-basis属性相关。规定的范围取决于box-sizing。

取值情况：
auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。