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