百度前端技術(shù)學(xué)院2017已經(jīng)結(jié)束，本文是之前學(xué)習(xí)中涉及的flex知識小結(jié)。
flex布局在網(wǎng)頁布局中非常實用，尤其是在面對一些較為彈性的布局設(shè)置的時候，會有異常驚艷的表現(xiàn)。在目前流行的響應(yīng)式布局觀念里，面對大的項目，一般采用bootstrap的柵格化布局來應(yīng)對，而對于一些小的項目，則完全可以采用flex布局。
對flex布局的學(xué)習(xí)，我認為關(guān)鍵是抓住伸縮容器和伸縮項目這兩個概念，圍繞這兩個概念，利用屬性來改變兩者之間的相對關(guān)系，既是flex布局。本文主要從基本術(shù)語、常用屬性兩方面進行梳理。
基本術(shù)語：伸縮容器、伸縮項目；主軸、主軸方向、主軸起點、終點、主軸長度、主軸長度屬性（同理有側(cè)軸的一套基本術(shù)語）。下面一張圖可以攘括這一套基本術(shù)語的概念（轉(zhuǎn)自w3cplus，非常慶幸站在巨人的肩膀上，感謝前端領(lǐng)域大漠老師等眾大牛）：
需要注意的是，flex的主側(cè)軸并不是對應(yīng)的元素width、height，主軸長度既可以是width值，也可以是height值，依據(jù)具體屬性的設(shè)置而來。
常用屬性：我認為可以把屬性歸納為兩類來學(xué)習(xí)：一類寫進伸縮容器里，一類寫在伸縮項目里。
A.寫進伸縮容器內(nèi)的屬性：這些屬性控制的主要都是伸縮項目在容器內(nèi)的布局。
1.最主要的屬性，display:flex/inline-flex。將容器設(shè)置為伸縮容器；
2.flex-flow：控制伸縮項目在容器內(nèi)的伸縮流方向和行數(shù)；這個屬性實則為flex-direction和flex-wrap的縮寫：
（1）.flex-driection：控制伸縮流方向，屬性值有row（默認）、row-reverse、column、column-reverse，術(shù)語描述為主軸方向分別與文檔書寫方向平行或反向平行，主軸方向分別與塊布局方向平行或反向平行，如果直白描述，可以簡單當(dāng)作從左至右/從右至左/從上到下/從下到上。
（2）.flex-wrap：控制伸縮項目單行還是多行排列，屬性值有nowrap（默認，單行），wrap（多行），wrap-reverse（多行，側(cè)軸方向交換）。
3.align-items：沿側(cè)軸方向?qū)R方式，屬性值有flex-start（伸縮項目沿著伸縮容器側(cè)軸起點邊對齊），flex-end（側(cè)軸終點邊對齊），center（同一行的伸縮項目沿著該行中線對齊），stretch（伸縮項目拉伸填充至同一高度），baseline（沿著伸縮項目文字基線對齊）。
4.justify-content：沿主軸方向?qū)R。屬性值有flex-start（伸縮項目從主軸起點開始往終點排列），flex-end（伸縮項目從主軸終點開始往起點排列），center（居中排列，如果伸縮項目設(shè)有margin，會有margin值間距），space-between（伸縮項目平均分布，且兩側(cè)項目靠近起終點），space-around（平均分布兩側(cè)會留出平均分配寬度一半的值）。
5.align-content：（我的理解是，多行情況下，每一行作為一個大的伸縮項目，沿側(cè)軸對齊方式，此時與justify-content的屬性值作用原理相同），屬性值有flex-start、flex-end、center、space-btween、space-around、stretch。
寫進伸縮項目內(nèi)的屬性：主要有兩個，或者說四個，分別控制了項目出現(xiàn)的順序和伸縮狀態(tài)。
1.order：在伸縮容器內(nèi)，利用此屬性，完全不依靠對html結(jié)構(gòu)的改變，就可以改變伸縮項目的出現(xiàn)順序。默認值都為0，值越高，越排在后面（整數(shù)值）。
2.flex（實為flex-grow/flow=shrink/flex-basis這個屬性縮寫）。格式為flex:flex-grow flow=shrink flex-basis。其中：
（1）.flex-grow：為伸縮項目所占的空間比例或者空間的伸長比例（正數(shù)），與伸縮項目數(shù)相關(guān)，也需要與flex-basis相配合才能準(zhǔn)確定義。默認值為1（如果省略）。
（2）.flex-basis：伸縮項目的初始長度，為帶長度單位的值。如果為0（默認值），此時伸縮項目會按照flex-gorw所設(shè)置的值形成的比例來分配其所占伸縮容器的主軸長度。如果設(shè)置為auto，該伸縮項目的長度等于其寬度或高度屬性值（取決于主軸方向），此時，當(dāng)伸縮容器主軸的長度大于伸縮項目初始長度之和時，多出的長度會按照flex-grow值的比例來分配給各伸縮容器。
（3.）flow=shrink：伸縮項目的收縮比例，當(dāng)伸縮項目長度之和大于伸縮容器主軸長度時，多出來的長度按照這個值的比例平均分配給各伸縮項目進行收縮。（默認值為1）。
此外，flex綜合屬性有兩個特定值auto和initial。兩者分別表示flex:1 1 auto；flex:0 1 auto。
以上，是對flex學(xué)習(xí)后的理解。主要參考Flexbox——快速布局神器。
此外，自己在寫demo過程中編寫了一個簡單的flex布局，通過在chrome瀏覽器里運行，利用開發(fā)者工具可以適時動態(tài)查看以上屬性的差別。
demo;
