flex 整理 笔记

Posted 2020-09-19

flex 会影响float吗？

设为Flex布局后，子元素的float、clear、vertical-align属性将失效。

flex的两个核心概念：容器  和 轴

容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

父容器：

主轴上如何分布  justify-content: center \ flex-start \ flex-end \ space-around \ space-between

交叉轴上如何分布  align-items: center \ flex-start \ flex-end \ baseline \ stretch （子没有设高度）

子元素：

flex-grow: 

flex-shrink: 

flex-basis: 

flex: 一个有单位：flex-baseis   一个没单位：flex-grow  

flex-grow  flex-shrink  flex-basis

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

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

flex-basis  

相当于是width，可以设置具体的数值，

如何和width冲突，听flex-basis的；

flex-grow

当父元素的宽度大于他的所有子元素的的宽度总和的时候，才会生效；

不设置默认是0，表明自己不参与索取，剩下的空间和它没有关系；

不为flex:0 的元素将瓜分剩下的元素，瓜分的大小，是其flex-grow的值占所有flex-grow的值的比例；

flex-grow和width 可以同时设置，flex-grow 可以设置任意的数字；

父元素宽400px，有两子元素：A和B。A宽为100px，B宽为200px。
则空余空间为 400-（100+200）= 100px。
如果A，B都不索取剩余空间，则有100px的空余空间。
如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px
如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2))）,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px (2/(1+2))）

flex-shrink

当父元素的宽度小于他的所有子元素的的宽度总和的时候，才会生效；

不设置默认是flex-shrink=1，会同比缩小；设置了flex-shrink 为0的元素不参与上缴空间；

设置了flex-shrink 不为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-shrink 占各个元素 宽度 * flex-shrink 总和的比例，这个比例去认领不足的空间；

https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

null