flex佈局-所有屬性整理

/* 
    flex佈局：
    彈性盒佈局，flex容器，子元素flex項目
    默認兩根軸：水平軸和垂直交叉軸，項目默認沿主軸排列
    注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
*/

/* 
    一、容器的屬性
        flex-direction
        flex-wrap
        flex-flow
        justify-content
        align-items
        align-content
*/

/* 
    1、flex-direction : 決定主軸方向（項目的排列方向）
        row : 默認值，主軸水平，起點左端
        row-reverse : 主軸水平，起點右端
        column : 主軸垂直，起點上端
        column-reverse : 主軸垂直，起點下端
*/

/* 
    2、flex-wrap : 各項目是否有換行
        nowrap : 默認值，不換行
        wrap : 換行
        wrap-reverse : 換行，第一行在下方
*/

/* 
    3、flex-flow : 是flex-direction 和 flex-wrap 的簡寫 默認值 row wrap
*/

/* 
    4、justify-content : 定義項目在主軸上的排布方式
        flex-start : 左對齊
        flex-end   : 右對齊
        center     : 居中
        space-betwoon : 兩端對齊，項目之間間隔相等
        space-around  : 每個項目間隔相等，所以項目之間間隔比兩端間隔大一倍
*/

/* 
    5、align-items : 定義項目在交叉軸上如何對齊
        flex-start : 上對齊
        flex-end   : 下對齊
        center     : 垂直居中
        baseline   : 項目的第一行文字基線對齊
        stretch    : 默認值，如果項目爲設置高度或者auto，將沾滿整個容器高度
*/

/* 
    6、align-content : 定義了多根軸線的對齊方式（約束交叉軸方向上）。如果只有一根軸線，不起作用
        flex-start：與交叉軸的起點對齊。
        flex-end：與交叉軸的終點對齊。
        center：與交叉軸的中點對齊。
        space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
        space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
        stretch（默認值）：軸線佔滿整個交叉軸。
*/


/* 
    二、項目上的屬性
        order 
        flex-grow
        flex-shrink
        flex-basis
        flex
        align-self
*/

/* 
    1、order : 定義項目的排列順序。數值越小，越靠前，默認值 0
*/

/* 
    2、flex-grow : 定義項目放大比例。默認0，即如果存在剩餘空間，也不放大
        如果所有項目flex-grow:1,則平分剩餘空間，按照佔比分空間
*/

/* 
    3、flex-shrink : 定義項目縮小比例。默認1，即空間不足，項目默認縮小
        如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。
        如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
        負值對該屬性無效
*/

/* 
    4、flex-basis : 定義了在分配多餘空間之前，項目佔據的主軸空間。
        可以設爲跟width或height屬性一樣的值固定px，項目佔據固定空間
*/

/* 
    5、flex : 是flex-grow、flex-shrink、flex-basis 簡寫，默認：0 1 auto，後兩個屬性可選值
        該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
*/

/* 
    6、align-self : 允許單個項目與其他項目不一樣的對齊方式，可覆蓋align-items，默認auto。
        flex-start : 上對齊
        flex-end   : 下對齊
        center     : 垂直居中
        baseline   : 項目的第一行文字基線對齊
        stretch    : 默認值，如果項目爲設置高度或者auto，將沾滿整個容器高度 
*/