Flex (flexible box) 從2009年發佈到現在已經不知不覺的過了10年了，現在基本各家瀏覽器都以及支持了，一些在做項目的小夥伴爲了兼容性，最終選擇放棄了flex，但是無論是以後新項目的技術選型還是自己對於技術的追逐，flex 對於前端開發來說是必須要掌握的。
對於flex佈局來說可用的屬性也不多，總共分爲兩種：一種是應用於容器，另一種應用於容器內子元素。
用於容器的：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
應用於 容器內子元素
orderflex-growflex-shrinkflex-basisflexalign-self
這些屬性特性就沒有描述的必要了，網上有各種介紹，包括阮一峯老師的工作日誌。
本文主要記錄兩個點，一個是flex 縮放（縮小、放大）的計算、另個是flex特殊值總結規律
注：以下是在chrome80.0版本的表現，ie 表現可能有些差異
一、flex-grow/flex-shink/flex-basis 的計算
flex-grow:
該屬性來設置，當父元素的寬度大於所有子元素的寬度的和時（即父元素會有剩餘空間），子元素如何分配父元素的剩餘空間。 flex-grow的默認值爲0，意思是該元素不索取父元素的剩餘空間，如果值大於0，表示索取。值越大，索取的越厲害。 舉個例子: 父元素寬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-shink:
該屬性來設置，當父元素的寬度小於所有子元素的寬度的和時（即子元素會超出父元素），子元素如何縮小自己的寬度的。 flex-shrink的默認值爲1，當父元素的寬度小於所有子元素的寬度的和時，子元素的寬度會減小。值越大，減小的越厲害。如果值爲0，表示不減小。 舉個例子: 父元素寬400px，有兩子元素：A和B。A寬爲200px，B寬爲300px。 則A，B總共超出父元素的寬度爲(200+300)- 400 = 100px。 如果A，B都不減小寬度，即都設置flex-shrink爲0，則會有100px的寬度超出父元素。 如果A不減小寬度:設置flex-shrink爲0，B減小。則最終B的大小爲 自身寬度(300px)- 總共超出父元素的寬度(100px)= 200px 如果A，B都減小寬度，A設置flex-shirk爲3，B設置flex-shirk爲2。則最終A的大小爲 自身寬度(200px)- A減小的寬度(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最終B的大小爲 自身寬度(300px)- B減小的寬度(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px
flex-basis
該屬性來設置該元素的寬度。當然，width也可以用來設置元素寬度。如果元素上同時設置了width和flex-basis,那麼flex-basis會覆蓋width的值。
三個屬性的優先級爲 flex-basis > width > “content”
二、flex 特殊值的計算
總結一句話：flex 只有一個特殊值 none （0 0 auto）， 其他情況都是有規律的 ，默認值 1 1 0%，設置的值將默認值進行覆蓋。
栗子
特殊值
{
flex: none;
}
{
flex-grow: 0;
flex-shink: 0;
flex-basis: auto;
}
其他三個值都設置的情況
{
flex: 2 2 100px;
}
{
flex-grow: 2;
flex-shink: 2;
flex-basis: 100px;
}
只設置兩個值得情況
/* 設置兩個數字 即 flex-grow 和 flex-shink 的值，將這個值替換默認值 1 1 */
{
flex: 2 2;
}
{
flex-grow: 2;
flex-shink: 2;
flex-basis: 0%;
}
/* 設置一個數字 一個表示長度的值（百分比或者長度）：即flex-grow 和 flex-basis 的值，替換默認值1 0% */
{
flex: 2 200px;
}
{
flex-grow: 2;
flex-shink: 1;
flex-basis: 200px;
}
設置一個值得情況
/* 設置一個數字 即 flex-grow 的值 替換默認值 1 */
{
flex: 0;
}
{
flex-grow: 0;
flex-shink: 1;
flex-basis: 0%;
}
/* 設置表示長度的值（百分比、長度、auto） 即 flex-basis 的值 替換默認值 0% */
{
flex: 100px;
}
{
flex-grow: 1;
flex-shink: 1;
flex-basis: 100px;
}
{
flex: auto;
}
{
flex-grow: 1;
flex-shink: 1;
flex-basis: auto
}
最後在總結一句話