前情
早期css布局使用最多的就是浮动，后面出了Flex后，就基本抛弃了浮动的使用，基本每个项目起手就是FLex，特别是小程序端，官方就是主推的Flex布局，所以Flex布局在我平时开发中有的非常多，也是非常好用的布局方式，相比以前你得费一些周折的布局方式，现在都能轻轻松松实现，用的多但是有一些计算细节其实也是理解不是特别深的，flex布局中有一个flex复合属性，用于控制弹性盒子子元素尺寸的，分开就是flex-basis+flex-grow+flex-shrink，最近在B站看到一个介绍Flex的视频其中说详细讲到 了计算逻辑的内容，感觉干货挺多，特此记录
各属性功能描述
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间
.item {flex-basis: <length> | auto; /* 默认值为auto */
}
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
.item {flex-grow: <number>; /* 默认值为 0 */
}
flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效
.item {flex-shrink: <number>; /* 默认值为 1 */
}
Flex空间分配逻辑
Flex空间分配的三步法：
第一步计算所有子元素basis的总和
第二步比较容器宽度和总的basis宽度的
第三步计算容器宽度
总的basis小于容器宽度，应用flex-grow
总的basis大于容器宽度，应用flex-shrink
总的basis等于容器宽度，无需伸缩
整个流程图如下：
计算公式如下图：
计算实战
当空间充足时，flex-grow生效，元素尺寸变大一起加大多余的空间
当前项的最终宽度 = basis + (容器宽度-总的basis) * 当前项的grow/总的grow，下面来看一个示例
关键代码如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><div class="container"><div class="a">a</div><div class="b">b</div><div class="c">c</div></div>
</body>
</html>
.container{width:600px;height: 168px;display: flex;flex-direction: row;
}
.a{flex:1 1 0;background-color: red;
}
.b{flex:2 1 auto;width: 200px;background-color: green;
}
.c{flex:3 1 100px;background-color: blue;
}
演示地址：https://jsbin.com/fibecijohi/edit?html,css,output
计算解析：
Flex容器container下有三个子项分别为a，b，c
容器的宽度为600
总的basis = 0(a)+200(b)+100(s) = 300
总的grow = 1(a)+2(b)+3(c) = 6
a项的宽度= 0 + (600 - 300) * 1/6 = 50
b项的宽度= 200 + (600 - 300) * 2/6 = 300
c项的宽度= 100 + (600 - 300) *3/6 = 250
当空间不足时，flex-shrink生效，元素尺寸变小一起减小不足的空间
当前项的最终宽度 = basis - (总的basis - 容器宽度) * (当前项的basis * 当前项的sthrink)/(各元素的basic * 各元素的shrink之和)，下面来看一个示例
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container"><div class="a">a</div><div class="b">b</div><div class="c">c</div>
</div>
</body>
</html>
.container{width:600px;height: 168px;display: flex;flex-direction: row;
}
.a{flex:1 1 200px;background-color: red;
}
.b{flex:1 3 auto;width: 400px;background-color: green;
}
.c{flex:1 2 100px;background-color: blue;
}
演示地址：https://jsbin.com/barihazasi/edit?html,css,js,output
计算解析：
Flex容器container下有三个子项分别为a，b，c
容器的宽度为600
总的basis = 200(a)+400(b)+100(s) = 700
a项的宽度= 200 - (700 - 600) * 1200/(1200 + 3400 + 2100) = 200 - 100 *200/1600 = 187.5
b项的宽度= 400 - (700 - 600) * 3400/(1200 + 3400 + 2100) = 400 - 100 * 1200/1600 = 325
c项的宽度= 100 - (700 - 600) * 2100/(1200 + 3400 + 2100) = 100 - 100 * 200/1600 = 87.5
总结
一直有在用Flex，也大概知道是按比例计算余下多的或少的空间，但并没有深入研究，今天在B站看到详细介绍计算逻辑的视频真的茅塞顿开，计算逻辑总结如下：
- 一切始于flex-basis：它决定了是进入扩张模式还是收缩模式
- 空间充足时，分配空间：系统根据flex-grow的比例分配余下空间
- 空间不足时，压缩空间：系统根据flex-basis和flex-shrink共同决定的权重分梭压缩量
个人知识有限，如果你有更好的解析方法，希望不吝分享，一起学习一起进步