一篇文章弄懂flex布局
** 壹 ? 引**
談到flex布局，我不知道有多少人跟我一樣挖诸，在本能的想到j(luò)ustify-content:center與align-items:center兩條屬性之后汁尺，除此之外的其它屬性居然顯得格外陌生。
可以說包括我在內(nèi)的大部分人多律，都是在被flex垂直水平居中方式所驚艷后才對(duì)其有所了解痴突，以至于在日常開發(fā)中對(duì)于flex的使用搂蜓，也確實(shí)更偏向于元素對(duì)齊方式的使用。
對(duì)我而言辽装，flex布局不應(yīng)該局限于對(duì)齊方式的使用帮碰，熟練掌握它對(duì)于頁面布局也是有較大好處的，所以這篇文章主要是偏向于flex屬性筆記式記錄拾积，畢竟真要學(xué)習(xí)flex阮一峰大神的flex教程才是首選殉挽，那么本文開始。
** 貳 ? 關(guān)于flex布局**
我們知道當(dāng)并列書寫多個(gè)div標(biāo)簽拓巧，它們會(huì)縱向向下排位斯碌，如果我們想將多個(gè)div并列成一排，就得借助position肛度，float傻唾，或display屬性，這便是傳統(tǒng)的盒模型做法贤斜。
而flex布局則是一種新的布局方案策吠，通過為修改父div的display屬性，讓父元素成為一個(gè)flex容器瘩绒，從而可以自由的操作容器中子元素(項(xiàng)目)的排列方式猴抹。
例如我們讓多個(gè)div橫向排列，傳統(tǒng)做法是使用浮動(dòng)锁荔，但浮空后因?yàn)槊撾x文檔流的緣故蟀给，父元素會(huì)失去高度，這又涉及了清除浮動(dòng)等一系列的問題阳堕。
而flex布局相對(duì)簡(jiǎn)單很多跋理，修改父元素display:flex，你會(huì)發(fā)現(xiàn)div自動(dòng)就排列成了一行恬总，而且沒有浮動(dòng)之后的副作用前普，從回流角度考慮，flex的性能更優(yōu)于float壹堰；隨著瀏覽器不斷兼容以及舊版本的淘汰拭卿，flex布局注定會(huì)成為更為流行的布局方案。
flex布局屬性主要由容器屬性和項(xiàng)目屬性構(gòu)成贱纠，下面我會(huì)分開討論這兩類屬性峻厚。
** 貳 ? 容器屬性**
1.flex-direction屬性
取值：row(默認(rèn)) | row-reverse | column | column-reverse
用于控制項(xiàng)目排列方向與順序，默認(rèn)row谆焊，即橫向排列惠桃，項(xiàng)目排列順序?yàn)檎?-2-3；row-reverse同為橫向排列，但項(xiàng)目順序?yàn)榈剐?-2-1辜王。
column 與row相反劈狐，為縱向排列，項(xiàng)目順序?yàn)檎?-2-3誓禁，column-reverse同為縱向排列懈息，項(xiàng)目順序?yàn)榈剐?-2-1肾档。
2.flex-wrap屬性
取值：nowrap(默認(rèn)) | wrap | wrap-reverse
用于控制項(xiàng)目是否換行摹恰，nowrap表示不換行；
舉個(gè)例子：比如容器寬度為300px怒见，容器中有6個(gè)寬度為60px的項(xiàng)目俗慈，nowrap情況下，項(xiàng)目會(huì)強(qiáng)行等分容器寬度從而不換行遣耍，那么項(xiàng)目實(shí)際寬度也就只有50px了闺阱，而非我們自己設(shè)置的60px。
wrap表示換行舵变，即項(xiàng)目不會(huì)等分容器寬度酣溃，而是根據(jù)自身寬度進(jìn)行排列，如果超出父容器寬度則自然換行纪隙。
wrap-reverse同樣表示換行赊豌，需要注意的是第一排會(huì)緊貼容器底部，而不是我們想象的項(xiàng)目6緊貼容器頂部绵咱，效果與wrap相反碘饼。
3.flex-flow屬性
flex-flow屬性是flex-deriction與flex-wrap屬性的簡(jiǎn)寫集合，默認(rèn)屬性為row nowrap悲伶，即橫向排列艾恼，且不換行，如果需要控制項(xiàng)目排列與換行麸锉，推薦使用此屬性钠绍，而非單獨(dú)寫兩個(gè)。
4.justify-content屬性
取值：flex-start(默認(rèn)) | flex-end | center | space-between | space-around | space-evenly;
用于控制項(xiàng)目在橫軸的對(duì)齊方式花沉，默認(rèn)flex-start即左對(duì)齊柳爽，center 為居中，對(duì)應(yīng)的flex-end為右對(duì)齊主穗。
space-between為左右兩端對(duì)齊泻拦，即左右兩側(cè)項(xiàng)目都緊貼容器，且項(xiàng)目之間間距相等忽媒。
space-around為項(xiàng)目之間間距為左右兩側(cè)項(xiàng)目到容器間距的2倍争拐，比較特別的布局，日常使用不太多。
space-evenly為項(xiàng)目之間間距與項(xiàng)目與容器間距相等架曹，相當(dāng)于除去項(xiàng)目寬度隘冲，平均分配了剩余寬度作為項(xiàng)目左右margin。
** 5.align-items屬性**
取值：flex-start | flex-end | center | baseline | stretch(默認(rèn))
用于控制項(xiàng)目在縱軸排列方式绑雄，默認(rèn)stretch即如果項(xiàng)目沒設(shè)置高度展辞，或高度為auto，則占滿整個(gè)容器万牺，下面第一張圖的項(xiàng)目沒設(shè)置高度罗珍，其余圖片中均為60px。
flex-start會(huì)讓項(xiàng)目在縱軸緊貼容器頂部脚粟，flex-end與之相反：
center使用最多覆旱，自然不會(huì)陌生，在縱軸中心位置排列：
baseline比較特殊核无，它讓項(xiàng)目以第一行文字的基線為參照進(jìn)行排列：
注意扣唱，常理來說justify-content與align-items默認(rèn)分別處理項(xiàng)目橫軸，縱軸的對(duì)齊方式团南，但如果我們修改了flex-direction為column噪沙，它們處理的軸向會(huì)交換，也就是justify-content處理縱軸吐根，align-items處理橫軸正歼。
6.align-content
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默認(rèn));
用于控制多行項(xiàng)目的對(duì)齊方式，如果項(xiàng)目只有一行則不會(huì)起作用佑惠；默認(rèn)stretch朋腋，即在項(xiàng)目沒設(shè)置高度，或高度為auto情況下讓項(xiàng)目填滿整個(gè)容器膜楷，與align-items類似旭咽。注意，如下演示的12個(gè)項(xiàng)目我均沒有設(shè)置高度赌厅。
flex-start 穷绵，center，flex-end 與align-items屬性表現(xiàn)一致：
space-around與justify-content保持一致特愿，即項(xiàng)目之間間距為上下兩端項(xiàng)目與容器間距兩倍仲墨。
space-evenly同理，項(xiàng)目之間間距與項(xiàng)目到容器之間間距相等揍障，space-between為上下兩側(cè)項(xiàng)目緊貼容器目养。
align-content其實(shí)也有baseline等其它可用值，表現(xiàn)與上面介紹過的屬性一致毒嫡，只是單行項(xiàng)目或多行項(xiàng)目的區(qū)別癌蚁。
** 叁 ? 項(xiàng)目屬性**
介紹完容器屬性，簡(jiǎn)單介紹下項(xiàng)目屬性。容器屬性是加在容器上的努释，那么項(xiàng)目屬性呢碘梢，就是寫在項(xiàng)目上的，就好比容器屬性給ul伐蒂，項(xiàng)目屬性給li差不多一個(gè)意思煞躬。
1.order
取值：默認(rèn)0，用于決定項(xiàng)目排列順序逸邦，數(shù)值越小恩沛，項(xiàng)目排列越靠前。
2.flex-grow
取值：默認(rèn)0昭雌，用于決定項(xiàng)目在有剩余空間的情況下是否放大复唤，默認(rèn)不放大健田；注意烛卧，即便設(shè)置了固定寬度，也會(huì)放大妓局。
假設(shè)默認(rèn)三個(gè)項(xiàng)目中前兩個(gè)個(gè)項(xiàng)目都是0总放，最后一個(gè)是1，最后的項(xiàng)目會(huì)沾滿剩余所有空間好爬。
假設(shè)只有第一個(gè)項(xiàng)目默認(rèn)為0局雄，后面兩個(gè)項(xiàng)目flex-grow均為1，那么后兩個(gè)項(xiàng)目平分剩余空間存炮。
假設(shè)第一個(gè)項(xiàng)目默認(rèn)為0炬搭，第二個(gè)項(xiàng)目為flex-grow:2，最后一個(gè)項(xiàng)目為1穆桂，則第二個(gè)項(xiàng)目在放大時(shí)所占空間是最后項(xiàng)目的兩倍宫盔。
3.flex-shrink
取值：默認(rèn)1，用于決定項(xiàng)目在空間不足時(shí)是否縮小享完，默認(rèn)項(xiàng)目都是1灼芭，即空間不足時(shí)大家一起等比縮小般又；注意彼绷，即便設(shè)置了固定寬度，也會(huì)縮小茴迁。
但如果某個(gè)項(xiàng)目flex-shrink設(shè)置為0寄悯，則即便空間不夠，自身也不縮小堕义。
上圖中第二個(gè)項(xiàng)目flex-shrink為0疟呐，所以自身不會(huì)縮小。
4.flex-basis
取值：默認(rèn)auto耗式，用于設(shè)置項(xiàng)目寬度，默認(rèn)auto時(shí)筹吐，項(xiàng)目會(huì)保持默認(rèn)寬度，或者以width為自身的寬度秘遏，但如果設(shè)置了flex-basis丘薛，權(quán)重會(huì)width屬性高，因此會(huì)覆蓋widtn屬性邦危。
上圖中先設(shè)置了flex-basis屬性洋侨，后設(shè)置了width屬性，但寬度依舊以flex-basis屬性為準(zhǔn)倦蚪。
5.flex
取值：默認(rèn)0 1 auto希坚，flex屬性是flex-grow，flex-shrink與flex-basis三個(gè)屬性的簡(jiǎn)寫陵且，用于定義項(xiàng)目放大裁僧，縮小與寬度。
該屬性有兩個(gè)快捷鍵值慕购，分別是auto(1 1 auto)等分放大縮小聊疲，與none(0 0 auto)不放大，但等分縮小沪悲。
6.align-self
取值：auto(默認(rèn)) | flex-start | flex-end | center | baseline | stretch获洲，表示繼承父容器的align-items屬性。如果沒父元素殿如，則默認(rèn)stretch贡珊。
用于讓個(gè)別項(xiàng)目擁有與其它項(xiàng)目不同的對(duì)齊方式，各值的表現(xiàn)與父容器的align-items屬性完全一致涉馁。
到這里门岔，flex布局屬性也就介紹完畢了，老實(shí)說谨胞，跟著完整寫了一遍固歪，發(fā)現(xiàn)之前很多理解都錯(cuò)誤了，最騷的是部分屬性單詞我都拼錯(cuò)了胯努，這篇博客就當(dāng)flex筆記整理牢裳，若有緣人能看見，也希望能幫助到你叶沛。
