深入理解 flex-grow & flex-shrink & flex-basis

libin19890520 发布于2019-08-01 15:40 / 409人阅读

摘要：前言有三个属性值，分别是，，，默认值是。的宽度分别是，父级的宽度是，父级宽减去子级的全部宽度，这样剩余空间就是。当然工作中最好用，更符合规范。如果父级的空间不够有效，无效。

前言

flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。

flex-grow

定义项目的放大比例，默认值为0，就算存在剩余空间，也不会放大。单单几句话肯定不能表达出意思，来看个DEMO。

flex-grow

flex-grow的默认值为0，如果没有定义该属性，是不会拥有分配剩余空间的权利的。A, B, C, D, E 的宽度分别是 100, 120, 130, 100, 100，父级的宽度是660，父级宽减去子级的全部宽度，这样剩余空间就是110。例子中B, C定义了flex-grow，分别是1，2，那剩余空间分成3份，B1份，C2份，比例就是1：2，分配计算出来的值就是B :36.666666666666664, C：73.33333333333333。这个时候剩余空间就被计算出来了，相加后的结果就是B：156.66666666666666，C：203.33333333333331。

B的计算公式：120 + (110 / 3) * 1

C的计算公式: 130 + (110 / 3) * 2

flex-shrink

定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，看例子。

flex-shrink

这里 A, B, C 的宽度分别是155, 200, 50，(注意这里的宽度我是用flex-basis代替的，在这个例子中和width的作用是一样的)。父级宽度是300，计算超出的空间就是 -105，这样超出的 105px 就要被 A, B, C 消化掉，比例是2：1：1。

如何消化？首先是每个项目的wdith值乘以flex-shrink值求积，

A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。

然后再求和所有项目的乘积。

(310 + 200 + 50) = 560

得到求占比之后还要乘以要腾出的空间。

A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375

得到每一项要腾出的空间後然後

A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625

好了，这样就得出计算后的宽度了。

flex-basis

和width一样，他的默认值为auto，把上面几个例子换成width也是一样的。当然工作中最好用flex-basis，更符合规范。

总结

如果父级的空间足够：flex-grow有效，flex-shrink无效。

如果父级的空间不够：flex-shrink 有效，flex-grow无效。

如果你有疑问欢迎讨论，一起学习。

原文：https://xiecg.github.io/2016/...

GPU云服务器云服务器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50035.html

深入理解 flex-grow &amp; flex-shrink &amp; flex-basis

摘要：前言有三个属性值，分别是，，，默认值是。的宽度分别是，父级的宽度是，父级宽减去子级的全部宽度，这样剩余空间就是。当然工作中最好用，更符合规范。如果父级的空间不够有效，无效。前言 flex 有三个属性值，分别是 flex-grow， flex-shrink， flex-basis，默认值是 0 1 auto。发现网上详细介绍他们的文章比较少，今天就详细说说他们，先一个一个看。 fl...

Richard_Gao 2019-08-29 11:10 评论0 收藏0
深入理解Flex布局 -- flex-grow &amp; flex-shrink &amp; fl

摘要：我希望实现一个左中右三列的布局，其中左右部分固定宽度，中间部分自适应实现起来很简单，代码如下到此为止一切都很美好。解决方法是给加上此时的完整代码如下宽度为的内容完整的在这里实战经验到此结束，下面我们再深入学习涉及到的知识点。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言最近在项目...

sydMobile 2019-08-30 15:55 评论0 收藏0
CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0