关于 flex 基础 以及 兼容性写法(二)

二、兼容性方面

<style></style>

 

显示

  /*父元素-横向排列（主轴）*/

     
  display:box;  （伸缩盒最老版本）
  display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
  display:-webkit-flex; /* Chrome */
  display:-moz-box;     /* Firefox 19 */
  display:-ms-flexbox;   
  display:flex;  /*flex容器*/
 
/*方向*/
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row; 
  flex-direction:row;    【新版本语法】

 

/*父元素-水平居中（主轴是横向才生效）*/【新版本语法】
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;

 

/*子元素-垂直居中（在侧轴、纵轴上）*/【新版本语法】
 -webkit-align-items:center;
 -moz-align-items:center;
 -ms-align-items:center;
 -o-align-items:center;
 align-items:center;

 

/*父元素-横向换行 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap;

 

/* 子元素—平分比例 */ 
 -prefix-box-flex: 1; /* old spec webkit, moz */
 -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
 -webkit-flex: 1;          /* Chrome */
 -moz-box-flex: 1;         /* Firefox 19- */
 -ms-flex: 1;              /* IE 10 */
 width:20%;
 flex: 1;                  /* NEW,  Opera 12.1, Firefox 20+ */
 flex: 2;
 

不写flex数值默认不可以伸缩。

 

/* 子元素-用于改变源文档顺序显示 */
 -prefix-box-ordinal-group: 1; /* old spec; must be positive */
 -webkit-box-ordinal-group: 2;    
 -moz-box-ordinal-group: 2;       
 -ms-flex-order: 2;               
 -webkit-order: 2;                
 order: 2;                        
 order: 3;

 

【老版本语法】
/*居中 */
box-pack:center;  //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;

/*子元素方向 */  
-webkit-box-orient:horizontal;  
-moz-box-orient:horizontal;  
-ms-box-orient:horizontal; 
-o-box-orient:horizontal; 
box-orient:horizontal;