上一篇 介紹了傳統(tǒng)的布局解決方案鱼鸠，基于 盒模型榆苞，依靠 display 屬性 + position 屬性 + float 屬性 + z-index 屬性；而它對于特殊的布局結(jié)構(gòu)不太友好霞捡，比如坐漏，垂直居中 就不易實現(xiàn)。

關(guān)于 Flex 布局

Flex(Flexible Box)碧信，即彈性布局,Flexbox 的子元素之間提供了強(qiáng)大的空間分布和對齊能力赊琳，為各種布局結(jié)構(gòu)提供了合理的解決方案。當(dāng)容器設(shè)為Flex布局以后砰碴，子元素的float 躏筏、clear 和vertical-align 屬性將失效。

基本概念

Flex 布局是一種一維的布局模型呈枉，能處理一個維度上的元素布局趁尼。

• FlexBox 中的兩根軸
  當(dāng)使用 Flex 布局時，容器中有兩根軸線：主軸和與之垂直的軸猖辫。
• FlexBox 中的起始和終止線
  起始線終止線規(guī)定了兩根軸線在布局中的方向酥泞。

FlexBox 容器屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

• flex-direction
  flex-direction定義了容器的兩根軸的方向和起止方向，可取值有 row | row-reverse | column | column-reverse啃憎。

    flex-direction: row;                   /主軸為水平方向芝囤，起點在左端
    flex-direction: row-reverse;           /主軸為水平方向，起點在右端
    flex-direction: column;                /主軸為垂直方向，起點在上沿
    flex-direction: column-reverse;        /主軸為垂直方向悯姊，起點在下沿

• flex-wrap
  默認(rèn)情況下羡藐，容器內(nèi)的 item 都會根據(jù)主軸進(jìn)行排列，即使超出了容器的邊界也不會換行繼續(xù)顯示悯许。flex-wrap 規(guī)定了元素是否換行仆嗦，可取值有 nowrap | wrap | wrap-reverse。

    flex-wrap: nowrap;                      /不換行岸晦。
    flex-wrap: wrap;                        /換行
    flex-wrap: wrap-reverse;                /反向換行

• flex-flow
  flex-flow 是flex-direction屬性和flex-wrap 屬性的簡寫形式欧啤，默認(rèn)值為row nowrap 。
• justify-content
  justify-content 屬性定義了容器內(nèi)元素在主軸上的對齊方式启上。常用的取值有 flex-start | flex-end | center | space-between | space-around邢隧。

   justify-content: flex-start              /默認(rèn)值，起始線對齊
   justify-content: flex-end                /終止線對齊
   justify-content: center                  /主軸居中對齊
   justify-content: space-around            /主軸兩端對齊冈在，容器內(nèi)元素之間的間距相同
   justify-content: space-between           /主軸方向上倒慧，容器內(nèi)每個元素有相同的外邊距

• align-items
  align-items 屬性定義項目在交叉軸上如何對齊。常用的取值有 flex-start | flex-end | center | baseline | stretch包券。

   align-items: flex-start;                 /默認(rèn)值,交叉軸起始線對齊
   align-items: flex-end;                   /交叉軸終止線對齊
   align-items: center;                     /交叉軸居中對齊
   align-items: baseline;                   /項目的第一行文字的基線對齊
   align-items: stretch;                    /如果項目未設(shè)置高度或設(shè)為auto纫谅，將占滿整個容器的高度

• align-content
  align-content 屬性定義了多根軸線的對齊方式。常用取值有 align-content: flex-start | flex-end | center | space-between | space-around | stretch溅固。

    align-content: flex-start付秕；              /交叉軸起始線對齊
    align-content: flex-end；                /交叉軸終止線對齊
    align-content: center侍郭；                  /交叉軸居中對齊
    align-content: space-between询吴；           /交叉軸兩端對齊，容器內(nèi)元素之間的間距相同
    align-content: space-around亮元；            /交叉軸方向上猛计，容器內(nèi)每個元素有相同的外邊距
    align-content: stretch；                 /默認(rèn)值爆捞，軸線占滿整個交叉軸

item 元素屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

• order
  order 屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序奉瘤。元素按照 order 屬性的值的增序進(jìn)行布局，取值為整數(shù)煮甥，值越小順序越靠前盗温。
• flex-grow
  flex-grow 屬性定義彈性容器內(nèi)元素的拉伸因子，取值為非負(fù)整數(shù)成肘，0 為不拉伸肌访，值越大拉伸比例越大，按比例分配容器內(nèi)剩余空間艇劫。
• flex-shrink
  flex-shrink 屬性指定了 flex 元素的收縮規(guī)則吼驶。flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮惩激，其收縮的大小是依據(jù) flex-shrink 的值。取值為非負(fù)整數(shù)蟹演，0 為不收縮风钻，值越大收縮比例越大，按比例收縮充滿彈性容器酒请。
• flex-basis
  flex-basis屬性指定了 flex 元素在主軸方向上的初始大小骡技，默認(rèn)為 auto。
• flex
  flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫羞反，默認(rèn)值為0 1 auto布朦。
• align-self
  align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items 屬性昼窗。默認(rèn)值為auto 是趴，表示繼承父元素的align-items 屬性，如果沒有父元素澄惊，則等同于 stretch唆途。