css3基础---flex新版与旧版

 
    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     等高布局(项目没有高度)
 
  ===========================================================================================
 
旧版本
 弹性空间管理
        将主轴上的富裕空间按比例分配到项目上!
 

-webkit-box-flex弹性空间的管理:将富裕空间按比例分配到各个项目上
-webkit-box-flex: 1;
默认值:0   不可继承

**********************************************************************************************************************************************

新版本

flex-grow: 1

css3基础---flex新版与旧版

上一篇:Spring XML配置文件示例(二)——web.xml


下一篇:prometheus常用函数详解