当前位置: 首页 > news >正文

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

前情

早期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等于容器宽度,无需伸缩

整个流程图如下:

image

计算公式如下图:

image 1

计算实战

当空间充足时,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

PixPin_2025-09-21_17-25-56

当空间不足时,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

PixPin_2025-09-21_17-48-04

总结

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

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

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

http://www.hskmm.com/?act=detail&tid=16983

相关文章:

  • AT_agc012_c [AGC012C] Tautonym Puzzle 题目分析
  • 详细介绍:回调函数与错误处理
  • Django系列(七)HttpRequest(请求)和HttpResponse(响应)对象
  • 工业主板:智能制造与严苛环境的坚实基石
  • 课上测试:C编程工具测试(AI)
  • 标题。
  • 虚拟机下的麒麟V10SP1与SP2进行iSCSI连接——基于MobaXterm
  • 中断的基本概念
  • AT_arc173_e [ARC173E] Rearrange and Adjacent XOR
  • 修复gradle8使用Transform第一个构建中断第二次构建失败的问题:java.io.IOException: Unable to delete directory xxxx\build
  • .NET操作Word/WPS打造专业文档 - 页面设置与打印控制完全指南
  • NORDIC蓝牙6.0新品NRF54L15多协议超低功耗高性能BLE芯片 - 动能世纪
  • 记录:git、.${index}. 滚动条
  • 使用springboot开发一个宿舍管理系统练习项目 - 实践
  • 元组
  • CF1542
  • Manim实现涟漪扩散特效
  • CRMEB标准版PHP移动订单功能深度解析:多端同步方案
  • CICD流程建设之持续测试实践指南
  • Xcode 26.0.1 (17A400) 发布 - Apple 平台 IDE
  • Tenable Nessus 10.10 (macOS, Linux, Windows) - 漏洞评估解决方案
  • CNN+MNIST - 实践
  • SonarQube Server 2025 Release 5 (macOS, Linux, Windows) - 代码质量、安全与静态分析工具
  • 超快轻量级离线翻译服务器MTranServer在腾讯云轻量应用服务器上的全流程部署指南 - 实践
  • 微算法科技(NASDAQ: MLGO)利用高级 Blowfish 加密标准实现区块链集成信息共享
  • 专业讲解大模型登记(纯干货)
  • Docker常用命令速查
  • 离线安装docker
  • MX 练石 2025 NOIP #9
  • dockerfile