flex布局是一種新的布局方式，從IE10開(kāi)始支持进宝。目前在移動(dòng)端使用最多部逮，目前PC端的使用也越來(lái)越多。
采用Flex布局的元素筏养，稱(chēng)為Flex容器（flex container）斧抱，簡(jiǎn)稱(chēng)”容器”。它的所有子元素自動(dòng)成為容器成員渐溶，稱(chēng)為Flex項(xiàng)目（flex item）辉浦，簡(jiǎn)稱(chēng)”項(xiàng)目”
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start掌猛，結(jié)束位置叫做main end盏浙；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end荔茬。
項(xiàng)目默認(rèn)沿主軸排列废膘。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size慕蔚。
設(shè)置在容器上的屬性有六個(gè)
- flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）
- flex-wrap屬性定義如果一條軸線(xiàn)排不下如何換行
- flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式丐黄，默認(rèn)值為row nowrap
- justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式
- align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式
- align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
以下6個(gè)屬性設(shè)置在項(xiàng)目上
- order屬性定義項(xiàng)目的排列順序。數(shù)值越小孔飒，排列越靠前灌闺，默認(rèn)為0
- flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0坏瞄，即如果存在剩余空間桂对，也不放大
- flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1鸠匀，即如果空間不足蕉斜，該項(xiàng)目將縮小
- flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性宅此，計(jì)算主軸是否有多余空間机错。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小
- align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式父腕，可覆蓋align-items屬性弱匪。默認(rèn)值為auto
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto
flex-direction的屬性值
（1）row
flex容器的主軸被定義為與文本方向相同璧亮。 主軸起點(diǎn)和主軸終點(diǎn)與內(nèi)容方
向相同萧诫。
（2）row-reverse
表現(xiàn)和row相同，但是置換了主軸起點(diǎn)和主軸終點(diǎn)
（3）column
flex容器的主軸和塊軸相同杜顺。主軸起點(diǎn)與主軸終點(diǎn)和書(shū)寫(xiě)模式的前后點(diǎn)相
同
（4）column-reverse
表現(xiàn)和column相同财搁，但是置換了主軸起點(diǎn)和主軸終點(diǎn)
flex-wrap的屬性值
（1）nowrap（默認(rèn)）：不換行
（2）wrap：換行蘸炸，第一行在上方
（3）wrap-reverse：換行躬络，第一行在下方
justify-content的屬性值
align-items的屬性值
align-content的屬性值（如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用）
flex-grow屬性
如果所有項(xiàng)目的flex-grow屬性都為1搭儒，則它們將等分剩余空間（如果有的話(huà)）穷当。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1淹禾，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍馁菜。
flex-shrink屬性
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)铃岔，都將等比例縮小汪疮。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1毁习，則空間不足時(shí)智嚷，前者不縮小。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前纺且，項(xiàng)目占據(jù)的主軸空間（main size）盏道。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間载碌。它的默認(rèn)值為auto猜嘱，即項(xiàng)目的本來(lái)大小。它可以設(shè)為跟width或height屬性一樣的值（比如350px）嫁艇，則項(xiàng)目將占據(jù)固定空間朗伶。
