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