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

郁兰娜 · 6 天前

前情

早期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>
a
b
c
</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>
a
b
c
</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共同决定的权重分梭压缩量

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

史华乐 · 3 天前

喜欢鼓捣这些软件，现在用得少，谢谢分享！

账号		自动登录	找回密码
密码			立即注册

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

回复

签约作者