常用弹性布局及其兼容性写法

偏执的太偏执、 2022-11-26 08:49 264阅读 0赞

// 开启弹性布局
        display:-webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    // 定义子元素排列
    	-webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -moz-box-orient:horizontal;
        -moz-box-direction:normal;     ( 子元素横向排列 默认 )
        box-orient:horizontal;
        box-direction:normal;
        -webkit-flex-direction:row;   
         flex-direction:row;
    	 
    	-webkit-box-orient:horizontal;
        -webkit-box-direction:reverse;
        -moz-box-orient:horizontal;
        -moz-box-direction:reverse;     ( 子元素横向反转排列 )
        box-orient:horizontal;
        box-direction:reverse;
        -webkit-flex-direction:row-reverse;
        flex-direction:column;
    
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -moz-box-orient:vertical;
        -moz-box-direction:normal;      ( 子元素竖向排列 )
        box-orient:vertical;
        box-direction:normal;
        -webkit-flex-direction:row-reverse;
        flex-direction:row-reverse;
        
       
        -webkit-box-orient:vertical;
        -webkit-box-direction:reverse;
        -moz-box-orient:vertical;
        -moz-box-direction:reverse;      ( 子元素竖向反转排列 )
        box-orient:vertical;
        box-direction:reverse;
        -webkit-flex-direction:column-reverse;
        flex-direction:column-reverse;
    
    
    // 定义子元素横向排列布局
    	-webkit-justify-content:center;
    	justify-content:center;
    	-moz-box-pack:center;  				(横向据中排列布局)
    	-webkit--moz-box-pack:center;
    	box-pack:center;
    
        webkit--moz-box-pack:center;
        -webkit-justify-content:space-between;
        -moz-box-pack:center;
        -moz-justify-content:space-between;  (横向两边排列布局)
    　  -ms-flex-pack: center;
        -ms-justify-content:space-between;
        box-pack:center;
        justify-content:space-between;
    
        -webkit-box-pack: center;
        -webkit-justify-content: space-around;
        -moz-box-pack:center;
        -moz-justify-content: space-around;
        -ms-flex-pack: center;
        -ms-justify-content: space-around;
        box-pack:center;
        justify-content: space-around;
    	
    // 定义子元素竖向排列布局
    	align-items:center;
    	-webkit-align-items:center;
    	box-align:center;
    	-moz-box-align:center;
    	-webkit-box-align:center;
    
    // 定义子元素换行
        -webkit-flex-wrap:wrap;
        -webkit-box-lines:multiple;
        -moz-flex-wrap:wrap;
        flex-wrap:wrap;
    
    
    //
    
    
    
      -webkit-flex-flow:row wrap;
    -webkit-box-orient:horizontal;
    -webkit-box-lines:multiple;
    -moz-flex-flow:row wrap;
    box-orient:horizontal;
    box-lines:multiple;
    flex-flow:row wrap;
    
    
    
    //  伸缩盒子布局兼容 flex:num;的兼容 
    	box-flex:num;
    	-webkit-box-flex:num;
    	-moz-box-flex:num;
    	-webkit-flex:num;
    	flex:num;
    
    //  元素出现顺序 order:num兼容
         box-order:num;
        -webkit-box-order:num;
        -moz-box-order:num;
        -webkit-order:num;
        order:num;