flexbox 收缩算法（上）

基础的flexbox布局方法，大家都比较熟悉了，日常画页面 flexbox 布局用的66的，灵活布局、不同移动设备的适配我也不在话下，可是同事问我：“知道flex的具体是怎么计算的吗”，我一脸懵，我也不清楚呢，既然不懂就要学?‍♀️，写给未来男朋友呀。 疑问： 一、如何收缩尺寸来避免父元素溢出？ 二、怎样增加尺寸来填满未使用的空间？ 今天就写篇 flex 的收缩算法给同事，也给未来男朋友呀。如果你想看flex基础的，可以移步到 flex MDN，要是来看 flex收缩算法 你就来对地方了，里面有一些数学计算，不过都很简单。为了计算出有多少可用空间能布局于flex子元素，浏览器必须知道这个item有多大才能开始。接下来我们来看看不同情况下的item是怎么计算的。 一、如何收缩尺寸来避免父元素溢出？ 我们举个?（项目的压缩因子相加小于1时）： 一个宽度为500px的容器，里面的是三个项目分别是150px、200px、250px，分别对项目1和项目2设置 flex-shrink 为 2，3，项目3不设置，默认 flex-shrink 为 1。 image 第一步：计算项目溢出值 500 - (150 + 200 + 250) = -100px 第二步：计算各个项目的宽度乘以 flex-shrink 的总权重 150 * 2 + 200 * 3+ 250 * 1 = 1150 第三步：计算各个项目压缩空间的大小 总溢出空间 * 项目宽度 * flex-shrink / 总权重，计算的时候值如果为小数，则向下取整。 item1的最终宽度为：150 - 100 * 150 * 2 / 1150 ≈ 123 item2的最终宽度为：200 - 100 * 200 * 3 / 1150 ≈ 147 item3的最终宽度为：250 - 100 * 250 * 1 / 1150 ≈ 228 最终效果 第二个?（项目的压缩因子相加小于1时）： 一个宽度为500px的容器，里面的是三个项目分别是150px、200px、250px，分别对项目1、项目2和项目3设置 flex-shrink 为 0.1，0.2，0.3。 image 第一步：计算项目溢出值 500 - (150 + 200 + 250) = -100px 溢出空间 = 溢出值 * ( 收缩因子之和 / 1 )： 溢出空间: 100 * (0.1 + 0.2 + 0.3) / 1 = 60 第二步：计算各个项目的宽度乘以 flex-shrink 的总权重 总权重为 150 * 0.1 + 200 * 0.2 + 250 * 0.3 = 130 第三步：计算各个项目压缩空间的大小 项目的实际大小 = 项目的指定宽度 - 溢出空间 * 项目宽度 * 收缩因子 / 总权重 item1的最终宽度为：150 - 60 * 150 * 0.1 / 130 ≈ 143px item2的最终宽度为：200 - 60 * 200 * 0.2 / 130 ≈ 181px item3的最终宽度为：250 - 60 * 250 * 0.3 / 130 ≈ 215px 最终效果 当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器就告一段落了。先喝点茶，稍作休息，继续看看当项目在主轴方向上撑不满容器的时候，是怎么扩张来填满容器的。 二、怎样增加尺寸来填满未使用的空间 ？ 举个?（当项目的扩张因子相加大于1时）： 一个宽度为500px的容器，里面的是三个项目分别是120px、150px、200px，分别对项目1和项目2设置 flex-grow 为 2，1，项目3不设置，默认 flex-grow 为 0。 image 第一步：计算容器的剩余空间 500 - (120 + 150 + 200) = 30px 第二步：分配剩余的空间 30px / ( 2+ 1 + 0) = 10px 第三步：计算各个项目扩张空间的大小 项目宽度 + (每份扩张配额 / 当前项目的扩张因子) item1的最终宽度为：120 + 10 * 2 = 140 item2的最终宽度为：150 + 10 * 1 = 160 item3的最终宽度为：200 + 10 *0 = 200 最终效果 最后一个?（当项目的扩张因子相加小于1时）： 一个宽度为500px的容器，里面的是三个项目分别是120px、150px、200px，分别对项目1、项目2、项目3设置 flex-grow 为 0.3，0.2，0.1。 image 第一步：计算容器的剩余空间 500 - (120 + 150 + 200) = 30px 第二步：分配剩余的空间 Flex-grow 相加 0.3 + 0.2 + 0.1 = 0.6 < 1 剩余空间按 30 / 1 = 30px 划分。 第三步：计算各个项目扩张空间的大小 项目自由宽度 + 剩余空间 * (每份扩张配额 / 1) ≈ 项目实际宽度 item1的最终宽度为：120 + 30 * (0.3 / 1) = 129 item2的最终宽度为：150 + 30 * (0.2 / 1) = 156 item3的最终宽度为：200 + 30 * (0.1 / 1) = 209 最终效果 感谢 @xoyoz @SYJ ?的指正。所有子项目flex-grow之和小于1的时，不会把所有的剩余空间都分配给子元素。 小结 妈耶，终于计算完了。咳咳！总算弄清了flex的收缩算法，写给未来男朋友看的flex完结✌ 。️如果这篇文档也有帮助到你，记得点赞、评论、关注三连击呀 ? 如上内容均为自己总结，难免会有错误或者认识偏差，如有问题，希望大家留言指正，以免误人，若有什么问题请留言，会尽力回答！

本文章由javascript技术分享原创和收集