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 （子没有设高度）

交叉轴上多行如何分布(只有一行的时候不起作用)   align-content : flex-start | flex-end | center | space-between | space-around | stretch;

主轴的方向：flex-direction:row | column | row-reverse | column-reverse

 

子元素：

flex-grow: 

flex-shrink: 

flex-basis: 

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，有两子元素：A和B。A宽为100px，B宽为200px。
2. 则空余空间为400-（100+200）=100px。
3. 如果A，B都不索取剩余空间，则有100px的空余空间。
4. 如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为自身宽度（100px）+剩余空间的宽度（100px）=200px
5. 如果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 总和的比例，这个比例去认领不足的空间；

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

null