css flex属性深入理解
一、flex属性
flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写。 首先来看看这三个属性的定义：
- flex-grow：该元素获得（伸张）多少正可用空间（positive free space）？
- flex-shrink：该元素要消除（收缩）多少负可用空间（negative free space）？
该属性用于处理浏览器计算弹性元素的
flex-basis值，并发现它们太大以至于无法适应弹性容器的情形。只要flex-shrink有正值，元素就会收缩以至于它们不会溢出容器。
- flex-basis：在该元素
未伸张和收缩之前，它的大小是多少？
通俗的理解，举个例子：A给5个孩子分财产，总共有300万。
- flex-grow相当于财产分完有剩余，该如何分配。
- flex-shrink相当于财产分配不足，该如何分配。
- flex-basis相当于分配得到的固定财产。
二、flex语法
在Flex布局中，一个Flex子项的宽度是由元素自身尺寸，flex-basis设置的基础尺寸，以及外部填充（flex-grow）或收缩（flex-shrink）规则3者共同决定的。
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
//默认值：flex:0 1 auto
flex: auto;
flex: none;
/* 1个值，flex-grow */
flex: 1;
/* 1个值，flex-basis */
flex: 100px;
/* 2个值，flex-grow和flex-basis */
flex: 1 100px;
/* 2个值，flex-grow和flex-shrink */
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;
当flex定义为一个或者两个值时，如果是长度值（如：100px），则值flex-basis。
三、flex计算尺寸
3.1 计算尺寸优先级
实际上在Flex布局中，一个flex子项的最终尺寸是基础尺寸、弹性增长或收缩、最大最小尺寸限制共同作用的结果。 其中：
- 基础尺寸由CSS flex-basis属性，width等属性以及box-sizing盒模型共同决定；
- 弹性增长指的是flex-grow属性，弹性收缩指的是flex-shrink属性；
- 最大最小尺寸限制指的是min-width/max-width等CSS属性，以及min-content最小内容尺寸。 最终计算的优先级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 100%;
background-color: pink;
display: flex;
}
.lt{
flex:0 0 200px;
background: blue;
max-width: 100px;
}
.ct{
flex:1 1 auto;
background: burlywood;
}
.rt{
flex:0 0 200px;
background: blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="lt box"></div>
<div class="ct box"></div>
<div class="rt box"></div>
</div>
</body>
</html>
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
3.2 计算尺寸方式
弹性增长（flex-grow）
.container{
width: 1000px;
height: 100px;
display: flex;
}
.lt{
flex:1 0 200px;
background: blue;
}
.ct{
flex:2 0 auto;
background: burlywood;
}
.rt{
flex:2 0 200px;
background: blueviolet;
}
总宽度1000px-基本宽度200px-基本宽度200px = 600px
600/5（flexGrow和） = 120
所以计算得到：
- lt：120+200px(flex-basis) = 320px;
- ct: 120*2 = 240;
- rt:120*2+200px(flex-basis) = 440
弹性收缩（flex-shrink）
.container{
width: 1000px;
height: 100px;
display: flex;
background:pink;
}
.lt{
flex:0 1 200px;
background: blue;
}
.ct{
flex:0 2 300px;
background: burlywood;
}
.rt{
flex:0 3 800px;
background: blueviolet;
}
分配收缩尺寸与增长尺寸的不同之处：需要计算出收缩的权重和。
- 首先计算权重之和：flex-shrink*flex-basis相加： 1*200+2*300+3*800 = 3200;
- 将上例三个盒子基本宽度相加得到1300px，超出父盒子宽度300px。然后，计算每个盒子的收缩空间：
flex-shrink*flex-basis/权重之和，
lt:200*1/3200*300 = 18.75，故宽度为200-18.75=181.25
ct:300*2/3200*300 = 56.25，故宽度为200-18.75=243.75
rt:800*3/3200*300 = 225，故宽度为800-225=575
投递美团等公司10个岗位