首页 > 代码库 > flex 整理 笔记

flex 整理 笔记

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 可以设置任意的数字;
  1. 父元素宽400px,有两子元素:ABA宽为100pxB宽为200px
  2. 则空余空间为 400-(100+200)= 100px
  3. 如果AB都不索取剩余空间,则有100px的空余空间。
  4. 如果A索取剩余空间:设置flex-grow1B不索取。则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px
  5. 如果AB都设索取剩余空间,A设置flex-grow1B设置flex-grow2。则最终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


flex 整理 笔记