????Flex是Flexible Box的縮寫胰坟，意為“彈性布局”，用來為盒模型提供最大的靈活性惯悠。彈性盒模型（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個更加有效的方式來布置靠粪，對齊和分布在容器之間的各項(xiàng)內(nèi)容，即使它們的大小是未知或者動態(tài)變化的茬底。·
????彈性布局的主要思想是讓容器有能力來改變項(xiàng)目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示設(shè)備和屏幕尺寸）的能力获洲。也就是說：Flex布局使得子項(xiàng)目能夠"彈性"的改變其高寬, 自由填充容器剩余空間, 以適應(yīng)容器變大, 或者壓縮子項(xiàng)目自身, 以適應(yīng)容器變小; 同時(shí)還可以方便的調(diào)節(jié)子項(xiàng)目方向和順序. flex常用于高寬需要自適應(yīng), 或子項(xiàng)目大小成比例, 或水平垂直對齊等場景.
????最重要的是彈性盒子布局與方向無關(guān)阱表，相對于常規(guī)的布局（塊是垂直和內(nèi)聯(lián)水平為基礎(chǔ)），很顯然，這些工作以及網(wǎng)頁設(shè)計(jì)缺乏靈活性最爬，無法支持大型和復(fù)雜的應(yīng)用程序（特別當(dāng)它涉及到改變方向涉馁，縮放、拉伸和收縮等）爱致。
注意：由于flexbox是一個整體模塊烤送，而不是單一的一個屬性，它涉及到了很多東西糠悯，包括它的整個屬性集帮坚。它們之中有一些是在父容器上設(shè)置，而有一些則是在子容器上設(shè)置互艾。
基本概念：Flex彈性盒模型里, 有容器和項(xiàng)目之分. 設(shè)置display:flex的為容器, 容器內(nèi)的元素稱作它的子項(xiàng)目, 容器有容器的一套屬性, 子項(xiàng)目有子項(xiàng)目的另一套屬性. (可以這么理解: father作為彈性盒子, 制定行為規(guī)范, son享受盒子的便利, 按照規(guī)范劃分各自的"轄區(qū)").
flex container：采用Flex布局的元素试和，即父元素，稱為Flex容器忘朝，簡稱容器灰署。
flex item：父元素內(nèi)包含的子元素，稱為Flex項(xiàng)目局嘁，簡稱項(xiàng)目。
Flex是沒有方向之分的晦墙，在Flex容器中默認(rèn)存在兩根軸悦昵，水平的軸為 主軸main axis，垂直的軸為 側(cè)軸cross axis晌畅。（如果改變flex-direction但指，主軸和側(cè)軸也將會改變）
主軸的開始位置（與邊框的交叉點(diǎn)）叫做 main start ，結(jié)束位置叫做 main end 抗楔。
側(cè)軸的開始位置叫做 cross start 棋凳， 結(jié)束位置叫做 cross end 。
項(xiàng)目默認(rèn)沿主軸方向排列连躏，單個項(xiàng)目占據(jù)的主軸空間叫做 main size 剩岳，側(cè)軸空間叫做 cross size 。
以上概念可以用下圖全部展現(xiàn)：
基本上入热，項(xiàng)目將制定了以下任一主軸（從 main-start 到 main-end）或十字軸（(從 cross-start 到 cross-end）拍棕。
注意：
1.css 列（CSS columns）在彈性盒子中不起作用·
2.float,clearandvertical-align在flex項(xiàng)目中不起作用
也就是說：設(shè)為Flex布局后，子元素的float勺良、clear绰播、vertical-align屬性將失效。
首先介紹：
父容器（父元素）的屬性
容器共有六個屬性
1尚困、flex-direction
????????flex-direction屬性
????????flex-direction屬性決定主軸的方向蠢箩，它可能有四個值。
????????row：默認(rèn)值，主軸為水平方向谬泌，起點(diǎn)在左端滔韵。
????????row-reverse：主軸為水平方向，起點(diǎn)在右端呵萨。
????????column：主軸為垂直方向奏属，起點(diǎn)在上端。
????????column-reverse：主軸為垂直方向潮峦，起點(diǎn)在下端囱皿。
2、flex-wrap
????????flex-wrap屬性決定項(xiàng)目在一行排不下的情況下是否換行忱嘹，它可能有三種值嘱腥。
????????nowrap：默認(rèn)值，不換行拘悦。
????????wrap：換行齿兔，第一行在主軸開始方向，依次往主軸結(jié)束方向布置础米。
????????wrap-reverse：換行分苇，第一行在主軸結(jié)束方向，依次往主軸結(jié)束方向布置
3屁桑、flex-flow
????flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式医寿，默認(rèn)值為row nowrap。
4蘑斧、justify-content
????????justify-content屬性定義了項(xiàng)目在主軸上的對齊方式靖秩，它可能有五個值。
????????flex-start：默認(rèn)值竖瘾，主軸開始方向?qū)R沟突。
????????flex-end：主軸結(jié)束方向?qū)R。
????????center：主軸居中對齊捕传。
????????space-between：兩端對齊惠拭，項(xiàng)目之間間隔都相等。
????????space-around：每個項(xiàng)目兩側(cè)的間隔相等乐横，所以項(xiàng)目之間間隔是項(xiàng)目與邊框間隔的兩倍求橄。
5、align-items
????align-items屬性定義了每行項(xiàng)目在側(cè)軸方向上的對齊方式葡公，它也可能有五個值罐农。
????- flex-start：側(cè)軸開始方向?qū)R。
????- flex-end：側(cè)軸結(jié)束方向?qū)R催什。
????- center：側(cè)軸居中對齊涵亏。
????- baseline：項(xiàng)目第一行文字的基線對齊
????- stretch：默認(rèn)值，如果項(xiàng)目未設(shè)置高度或高度設(shè)為auto，將占滿整個容器气筋。
6拆内、align-content
????align-content屬性定義了容器在側(cè)軸方向上有額外空間時(shí)，如何每排布一行宠默，當(dāng)容器只有一行時(shí)麸恍，它不起作用，它可能有六個值搀矫。
????flex-start：側(cè)軸開始方向?qū)R抹沪。
????flex-end：側(cè)軸結(jié)束方向?qū)R。
????center：側(cè)軸中心中對齊瓤球。
????space-between：與側(cè)軸兩端對齊融欧，每行軸線間隔平均。
????space-around：每根軸線兩側(cè)間隔相等卦羡。
????stretch：默認(rèn)值噪馏，占滿整個整個側(cè)軸
子容器（子元素的屬性）：
子容器（子元素）共有六個屬性
1、order
2绿饵、flex-grow
3欠肾、flex-shrink
4、flex-basis
5拟赊、flex
6董济、align-self
order屬性
order屬性定義項(xiàng)目的排列順序，數(shù)值越小排列越靠前要门，默認(rèn)為0，可能的值為任意整數(shù)廓啊。
flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例欢搜，默認(rèn)為0，即如果存在剩余空間也不放大谴轮。
如果所有項(xiàng)目的flex-grow屬性都為1炒瘟，則它們將等分剩余空間（如果有的話）。如果一個項(xiàng)目的flex-grow屬性為2第步，其他項(xiàng)目都為1疮装，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍
flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1粘都，即如果空間不足該項(xiàng)目將縮小廓推。
負(fù)值對該屬性無效,即該屬性可能的值為0或正整數(shù)。
如果所有項(xiàng)目的flex-shrink屬性都為1翩隧，當(dāng)空間不足時(shí)樊展，都將等比例縮小。如果一個項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1专缠，則空間不足時(shí)雷酪，前者不縮小。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前涝婉，項(xiàng)目占據(jù)的主軸空間（main-size）哥力。瀏覽器根據(jù)整個屬性，計(jì)算主軸是否有多余空間墩弯。它的默認(rèn)值為auto吩跋，即項(xiàng)目的本來大小。
它可以設(shè)為跟width或height屬性一樣的值（比如350px）最住，則項(xiàng)目將占據(jù)固定空間钞澳。
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto涨缚。后兩個屬性可選轧粟。
該屬性有兩個快捷值：auto (1 1 auto)（既可以放大占滿空間，也可縮信骸） 和 none (0 0 auto)（不可放大兰吟，也不可縮小）茂翔。
建議優(yōu)先使用這個屬性混蔼，而不是單獨(dú)寫三個分離的屬性，因?yàn)闉g覽器會推算相關(guān)值珊燎。
align-self屬性
align-self屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的側(cè)軸對齊方式惭嚣，可覆蓋align-items屬性。默認(rèn)值為auto悔政，表示繼承父元素的align-items屬性晚吞，如果沒有父元素，則等同于stretch谋国。
其值除auto外槽地，其他與align-items完全一致。
免責(zé)聲明：文章部分內(nèi)容和圖片來自網(wǎng)絡(luò)芦瘾，本人尊重原創(chuàng)作者提供的優(yōu)質(zhì)文章捌蚊，在這里向原創(chuàng)作者表示敬意和感謝，這篇文章只用于本人的知識學(xué)習(xí)近弟，絕非用于其他商業(yè)等用途缅糟，如有侵權(quán)，請與本人聯(lián)系藐吮，并將在第一時(shí)間刪除溺拱！謝謝Ｌ颖础（聯(lián)系郵箱：290976801@qq.com）
