flex與box新老版本的用法（彈性盒子）

    1.flex基礎點
        ---什麼是容器，什麼是項目，什麼是主軸，什麼是側軸？
        ---項目永遠排列在主軸的正方向上
        ---flex分新舊兩個版本
            -webkit-box
            -webkit-flex / flex
    
    2.注意點
        ---咱們都知道新版本的flex要比老版本的flex強大不少，有沒有必要學習老版本的flex？
            移動端開發者必需要關注老版本的flex
                由於不少移動端設備內核低只老版本的flex
        
        ---老版本的box經過兩個屬性四個屬性值控制了主軸的位置和方向
              新版本的flex經過一個屬性四個屬性值控制了主軸的位置和方向
    
    3.老版本
        容器
            容器的佈局方向
                -webkit-box-orient:horizontal/vertical
                控制主軸是哪一根
                    horizontal：x軸
                    vertical  ：y軸
            容器的排列方向
                -webkit-box-direction：normal/reverse
                控制主軸的方向
                    normal：從左往右（正方向）
                    reverse：從右往左（反方向）
            富裕空間的管理
                只決定富裕空間的位置，不會給項目區分配空間
                主軸
                    -webkit-box-pack
                        主軸是x軸
                            start：在右邊
                            end:    在左邊
                            center：在兩邊
                            justify：在項目之間
                        主軸是y軸
                            start：在下邊
                            end：在上邊
                            center：在兩邊
                            justify：在項目之間
                側軸
                    -webkit-box-algin
                        側軸是x軸
                            start：在右邊
                            end：  在左邊
                            center：在兩邊
                        側軸是y軸
                            start：在下邊
                            end：   在上邊    
                            center：在兩邊
                        
    4.新版本
        容器
            容器的佈局方向
            容器的排列方向
                flex-direction
                控制主軸是哪一根，控制主軸的方向
                    row;        從左往右的x軸    
                    row-reverse;從右往左的x軸
                    column;        從上往下的y軸
                    column-reverse;從下往上的y軸
            富裕空間的管理
                只決定富裕空間的位置，不會給項目區分配空間
                主軸
                    justify-content
                            flex-start：        在主軸的正方向
                            flex-end:        在主軸的反方向
                            center：            在兩邊
                            space-between：    在項目之間
                             space-around：  在項目兩邊
                            
                側軸
                    align-items
                            flex-start：在側軸的正方向
                            flex-end：    在側軸的反方向
                            center：        在兩邊
                            baseline    基線對齊
                             stretch        等高佈局（項目沒有高度）    
（本文僅做爲本身方便查找，不作盈利使用！）