flex布局兼容性写法

flex布局应用越来越广泛，它对于布局的处理非常灵活!
但是PC端兼容问题真的是一大堆，IE9及以下不支持，最好在移动端使用，最新的PC端浏览器也支持！

一、flexbox布局（弹性布局）

注意： 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器属性

。flex-direction： 项目的排列方向（橫or竖）
。flex-wrap： 换不换行，默认一条线上
。flex-flow： 方向，换行
。justify-content： 主轴上对齐方式
。align-items： 交叉轴如何对齐
。align-content： 很多根轴线的对齐方式
。box-orient：指定一个box子元素方向

• flex-direction

  • row 水平，左端
  • row-reverse 水平，右端
  • column 垂直，上沿
  • column-reverse 垂直，下沿

• flex-wrap

  • nowrap 不换行
  • wrap 换行
  • wrap-reverse 换行，第一行在下方

• flex-flow

  • 是flex-direction和 flex-wrap简写，默认row nowrap

• justify-content(常用！！！)定义项目在主轴上如何对齐
  flex-start | flex-end | center | space-between | space-around;
  左对齐 | 右对齐 | 居中 | 两端对齐贴紧，项目间间隔相等 | 每个项目两两间隔相等

• align-items 定义项目在交叉轴上如何对齐
  align-items: flex-start | flex-end | center | baseline | stretch;
  交叉轴起点对齐 | 交叉轴终点对齐 | 交叉轴中点对齐 | 项目第一行文字基线对齐

• align-content
  定义很多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  与交叉轴起点对齐 | 与交叉轴终点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布
  | 每根轴线两侧的间隔都相等

• box-orient
  指定一个box子元素是否应按水平或垂直排列。
  horizontal：水平（默认）
  vertical：垂直
  inline-axis：子元素沿内联坐标轴（映射到横向）
  block-axis：子元素沿块坐标轴（映射到垂直）

二、兼容性方面

  /*父元素-横向排列（主轴）*/
     
  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;
 -ms-flex-pack: center;


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


/* 子元素-用于改变源文档顺序显示 */
 -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;

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

原文：https://blog.csdn.net/cddcj/article/details/52131089