彈性盒模型

flexbox 

經過給父級添加display: flex;  使父級變成一個彈性盒模型，以此來影響後代元素(不會影響自身)

設置過彈性盒模型的父級，其子代通常不會超出父元素的內部範圍，除非被內容撐開子元素的寬高，致使沒法改變子元素的大小時會超出，（注意：一串數字或一串字母寫在一塊兒會被瀏覽器默認爲一個字符，不會默認換行）

默認子元素同排顯示（按主軸方向排布），當父級寬度有剩餘時，子代正常顯示，當子代寬度超過父級時，等寬度比去分配子代寬度

默認子代高度100%寬度爲零，與倒置的標準文檔流極度類似，相似寬高對調

1、由於子元素時按照主軸方向排列的，因此咱們須要改變主軸方向來改變排列方式

flex-direction(主軸方向):

1. row(默認值)：主軸橫向，從左向右

2. row-reverse：主軸橫向，從右向左

3. column：主軸縱向，自上向下（變的和標準文檔流同樣默認width:100%）

4. column-reverse：主軸縱向，自下向上（變的和標準文檔流同樣默認width:100%）

2、由於子元素在彈性盒模型裏默認不換行，須要設置 flex-wrap 來使它換行

flex-wrap：

1.wrap：換行，雖然換行可是會在評分父級高度處換行（flexbox中到處可見均分），且若是子元素的總寬度大於父元素，超出的子元素將到下一行顯示，子元素寬度不會重置，若是子元素的總高度大於父元素，則元素會超出父元素邊界

3、在主軸的排列方向 justify-content 主軸起點爲mian start，終點爲mian end

在不動主軸的狀況下justify-content：

1. flex-end：右對齊

2. flex-start（默認值）：左對齊

3. center：居中

4. space-between：兩端對齊，子元素之間間隔相等 元素之間的間距=(父元素的寬度-子元素寬度之和)/(子元素個數-1)

5. space-around：子元素的margin-left與margin-right均分空餘區

4、交叉軸的排列方向 align-items

align-items：除1外其餘的都會破壞默認高度100%

1. stretch(默認值)：若是項目未設置高度或者設成auto，將佔滿整個容器的高度

2. flex-start：交叉軸的起點對齊

3. flex-end：交叉軸的終點對齊

4. center：交叉軸的終點對齊，即垂直居中

5. baseline：全部子代的第一行文字的基線對齊，知足所有的文字基線準則，注意當子代爲空時會被認爲和圖片同樣，底部會照着基線排列進而影響美觀

5、交叉軸排列方向2 align-content 能夠很好的解決二中的問題

align-content：

1. stretch(默認值)：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的高度尺寸。

2. center：元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊

3. flex-start：元素位於容器的開頭

4. space-between：各行在彈性盒容器中平均分佈(主要表如今寬)，未設置高度的會自動變成該行最高的子代的高度

5. space-around：各行在彈性盒容器中平均分佈(主要表如今高)，兩端保留子元素與子元素之間間距大小的一半

6. flex-end：元素位於容器的底部

6、彈性增加因子（必須是父級寬度有剩餘時纔有效，不然無法增加）

flex-grow （彈性增加因子）：number（填數字）；/定義項目的放大比例（默認爲0） 即若是存在剩餘空間，也不放大/

該CSS屬性設置子元素在彈性容器的具備剩餘空間是應該如何分配給元素。flex-grow剩餘空間是flex容器的大小減去全部lex項目的大小。若是全部兄弟項目具備相同的彈性增加因子，則全部項目將得到相同的剩餘空間份額，不然將根據不一樣彈性增加因子定義的比率進行分配。

7、彈性縮小因子（解決子元素總寬大於父級時，如何縮小的問題）

flex-shrink （彈性縮放因子） ：number； /定義項目的縮小比例，即若是空間不足，該項目將縮小（默認爲1）；/

彈性增加因子:當父級元素的寬大於子元素的寬和時，能夠利用彈性增加因子.
（無負值）把父元素剩餘的空間合理應用,按彈性增加因子的比例給子元素加寬
彈性縮小因子:當父級元素的寬小於子元素的寬和時，能夠利用彈性縮小因子.
（無負值）把子元素溢出的空間合理應用，按彈性縮小因子的比例給子元素減寬

8、flex屬性（複合寫法）

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲 0 1 auto。後兩個屬性可選

flex: flex-grow  flex-shrink flex-basis（初始寬度）;

1. auto 計算值爲 1 1 auto

2. initial: 計算值爲 0 1 auto

3. none：計算值爲 0 0 auto

4. inherit：從父元素繼承

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值，方便不用計算

9、order屬性：整數值；

屬性定義子元素的排列順序，數值越小越靠前。默認爲0，可負數