百度前端技術(shù)學(xué)院2017已經(jīng)結(jié)束最欠，本文是之前學(xué)習(xí)中涉及的flex知識(shí)小結(jié)吼畏。
flex布局在網(wǎng)頁(yè)布局中非常實(shí)用姑丑，尤其是在面對(duì)一些較為彈性的布局設(shè)置的時(shí)候，會(huì)有異常驚艷的表現(xiàn)岖妄。在目前流行的響應(yīng)式布局觀念里型将，面對(duì)大的項(xiàng)目寂祥，一般采用bootstrap的柵格化布局來(lái)應(yīng)對(duì)荐虐，而對(duì)于一些小的項(xiàng)目，則完全可以采用flex布局丸凭。
對(duì)flex布局的學(xué)習(xí)福扬，我認(rèn)為關(guān)鍵是抓住伸縮容器和伸縮項(xiàng)目這兩個(gè)概念铛碑，圍繞這兩個(gè)概念，利用屬性來(lái)改變兩者之間的相對(duì)關(guān)系虽界，既是flex布局。本文主要從基本術(shù)語(yǔ)撇吞、常用屬性兩方面進(jìn)行梳理。
基本術(shù)語(yǔ)：伸縮容器迄薄、伸縮項(xiàng)目煮岁；主軸、主軸方向冶伞、主軸起點(diǎn)步氏、終點(diǎn)、主軸長(zhǎng)度金抡、主軸長(zhǎng)度屬性（同理有側(cè)軸的一套基本術(shù)語(yǔ)）腌且。下面一張圖可以攘括這一套基本術(shù)語(yǔ)的概念（轉(zhuǎn)自w3cplus铺董，非常慶幸站在巨人的肩膀上，感謝前端領(lǐng)域大漠老師等眾大牛）：
需要注意的是坝锰，flex的主側(cè)軸并不是對(duì)應(yīng)的元素width顷级、height确垫，主軸長(zhǎng)度既可以是width值，也可以是height值翔冀，依據(jù)具體屬性的設(shè)置而來(lái)披泪。
常用屬性：我認(rèn)為可以把屬性歸納為兩類來(lái)學(xué)習(xí)：一類寫進(jìn)伸縮容器里，一類寫在伸縮項(xiàng)目里跌捆。
A.寫進(jìn)伸縮容器內(nèi)的屬性：這些屬性控制的主要都是伸縮項(xiàng)目在容器內(nèi)的布局象颖。
1.最主要的屬性，display:flex/inline-flex抄瓦。將容器設(shè)置為伸縮容器钙姊；
2.flex-flow：控制伸縮項(xiàng)目在容器內(nèi)的伸縮流方向和行數(shù)埂伦；這個(gè)屬性實(shí)則為flex-direction和flex-wrap的縮寫：
（1）.flex-driection：控制伸縮流方向，屬性值有row（默認(rèn)）膊毁、row-reverse婚温、column媳否、column-reverse篱竭，術(shù)語(yǔ)描述為主軸方向分別與文檔書寫方向平行或反向平行，主軸方向分別與塊布局方向平行或反向平行掺逼，如果直白描述坪圾，可以簡(jiǎn)單當(dāng)作從左至右/從右至左/從上到下/從下到上惑朦。
（2）.flex-wrap：控制伸縮項(xiàng)目單行還是多行排列，屬性值有nowrap（默認(rèn)病梢，單行）蜓陌，wrap（多行），wrap-reverse（多行填抬，側(cè)軸方向交換）。
3.align-items：沿側(cè)軸方向?qū)R方式飒责，屬性值有flex-start（伸縮項(xiàng)目沿著伸縮容器側(cè)軸起點(diǎn)邊對(duì)齊）宏蛉，flex-end（側(cè)軸終點(diǎn)邊對(duì)齊）性置，center（同一行的伸縮項(xiàng)目沿著該行中線對(duì)齊），stretch（伸縮項(xiàng)目拉伸填充至同一高度）嗅义，baseline（沿著伸縮項(xiàng)目文字基線對(duì)齊）芥喇。
4.justify-content：沿主軸方向?qū)R凰萨。屬性值有flex-start（伸縮項(xiàng)目從主軸起點(diǎn)開(kāi)始往終點(diǎn)排列）胖眷，flex-end（伸縮項(xiàng)目從主軸終點(diǎn)開(kāi)始往起點(diǎn)排列）珊搀，center（居中排列，如果伸縮項(xiàng)目設(shè)有margin囚枪，會(huì)有margin值間距）链沼，space-between（伸縮項(xiàng)目平均分布沛鸵，且兩側(cè)項(xiàng)目靠近起終點(diǎn)）缆八，space-around（平均分布兩側(cè)會(huì)留出平均分配寬度一半的值）奈辰。
5.align-content：（我的理解是奖恰，多行情況下房官，每一行作為一個(gè)大的伸縮項(xiàng)目续滋，沿側(cè)軸對(duì)齊方式疲酌，此時(shí)與justify-content的屬性值作用原理相同），屬性值有flex-start湿颅、flex-end油航、center、space-btween谊囚、space-around镰踏、stretch。
寫進(jìn)伸縮項(xiàng)目?jī)?nèi)的屬性：主要有兩個(gè)沙合，或者說(shuō)四個(gè)奠伪，分別控制了項(xiàng)目出現(xiàn)的順序和伸縮狀態(tài)。
1.order：在伸縮容器內(nèi)首懈，利用此屬性绊率，完全不依靠對(duì)html結(jié)構(gòu)的改變，就可以改變伸縮項(xiàng)目的出現(xiàn)順序究履。默認(rèn)值都為0滤否，值越高，越排在后面（整數(shù)值）挎袜。
2.flex（實(shí)為flex-grow/flow=shrink/flex-basis這個(gè)屬性縮寫）顽聂。格式為flex:flex-grow flow=shrink flex-basis肥惭。其中：
（1）.flex-grow：為伸縮項(xiàng)目所占的空間比例或者空間的伸長(zhǎng)比例（正數(shù)）盯仪，與伸縮項(xiàng)目數(shù)相關(guān)紊搪，也需要與flex-basis相配合才能準(zhǔn)確定義。默認(rèn)值為1（如果省略）全景。
（2）.flex-basis：伸縮項(xiàng)目的初始長(zhǎng)度，為帶長(zhǎng)度單位的值滞伟。如果為0（默認(rèn)值），此時(shí)伸縮項(xiàng)目會(huì)按照f(shuō)lex-gorw所設(shè)置的值形成的比例來(lái)分配其所占伸縮容器的主軸長(zhǎng)度亩钟。如果設(shè)置為auto，該伸縮項(xiàng)目的長(zhǎng)度等于其寬度或高度屬性值（取決于主軸方向），此時(shí)，當(dāng)伸縮容器主軸的長(zhǎng)度大于伸縮項(xiàng)目初始長(zhǎng)度之和時(shí)荸频，多出的長(zhǎng)度會(huì)按照f(shuō)lex-grow值的比例來(lái)分配給各伸縮容器场仲。
（3.）flow=shrink：伸縮項(xiàng)目的收縮比例，當(dāng)伸縮項(xiàng)目長(zhǎng)度之和大于伸縮容器主軸長(zhǎng)度時(shí)馍忽，多出來(lái)的長(zhǎng)度按照這個(gè)值的比例平均分配給各伸縮項(xiàng)目進(jìn)行收縮。（默認(rèn)值為1）喂窟。
此外质和，flex綜合屬性有兩個(gè)特定值auto和initial。兩者分別表示flex:1 1 auto弃锐；flex:0 1 auto支竹。
以上，是對(duì)flex學(xué)習(xí)后的理解扎运。主要參考Flexbox——快速布局神器。
此外，自己在寫demo過(guò)程中編寫了一個(gè)簡(jiǎn)單的flex布局花吟，通過(guò)在chrome瀏覽器里運(yùn)行遣蚀，利用開(kāi)發(fā)者工具可以適時(shí)動(dòng)態(tài)查看以上屬性的差別。
demo;
