一文搞懂Flex弹性布局空间分配规则

前情

早期css布局使用最多的就是浮动，后面出了Flex后，就基本抛弃了浮动的使用，基本每个项目起手就是FLex，特别是小程序端，官方就是主推的Flex布局，所以Flex布局在我平时开发中有的非常多，也是非常好用的布局方式，相比以前你得费一些周折的布局方式，现在都能轻轻松松实现，用的多但是有一些计算细节其实也是理解不是特别深的，flex布局中有一个flex复合属性，用于控制弹性盒子子元素尺寸的，分开就是flex-basis+flex-grow+flex-shrink，最近在B站看到一个介绍Flex的视频其中说详细讲到了计算逻辑的内容，感觉干货挺多，特此记录

各属性功能描述

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小，它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间

css 复制代码

.item {
  flex-basis: <length> | auto; /* 默认值为auto */
}

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

css 复制代码

.item {
  flex-grow: <number>; /* 默认值为 0 */
}

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效

css 复制代码

.item {
  flex-shrink: <number>; /* 默认值为 1 */
}

Flex空间分配逻辑

Flex空间分配的三步法：

第一步计算所有子元素basis的总和

第二步比较容器宽度和总的basis宽度的

第三步计算容器宽度

总的basis小于容器宽度，应用flex-grow

总的basis大于容器宽度，应用flex-shrink

总的basis等于容器宽度，无需伸缩

整个流程图如下：

计算公式如下图：

计算实战

当空间充足时，flex-grow生效，元素尺寸变大一起加大多余的空间

当前项的最终宽度 = basis + (容器宽度-总的basis) * 当前项的grow/总的grow，下面来看一个示例

关键代码如下：

html 复制代码

<!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>

css 复制代码

.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之和)，下面来看一个示例

代码如下:

html 复制代码

<!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>

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/(1 200 + 3400 + 2100) = 200 - 100 *200/1600 = 187.5

b项的宽度= 400 - (700 - 600) * 3400/(1 200 + 3400 + 2100) = 400 - 100 * 1200/1600 = 325

c项的宽度= 100 - (700 - 600) * 2100/(1 200 + 3400 + 2100) = 100 - 100 * 200/1600 = 87.5

总结

一直有在用Flex，也大概知道是按比例计算余下多的或少的空间，但并没有深入研究，今天在B站看到详细介绍计算逻辑的视频真的茅塞顿开，计算逻辑总结如下：

一切始于flex-basis：它决定了是进入扩张模式还是收缩模式
空间充足时，分配空间：系统根据flex-grow的比例分配余下空间
空间不足时，压缩空间：系统根据flex-basis和flex-shrink共同决定的权重分梭压缩量

个人知识有限，如果你有更好的解析方法，希望不吝分享，一起学习一起进步