.Flex { 
display: box;              /*OLD - Android 4.4-*/ 
display: -webkit-box;      /*OLD - iOS 6-, Safari 3.1-6*/ 
display: -moz-box;         /*OLD - Firefox 19- (buggy but mostly works)*/ 
display: -ms-flexbox;      /*TWEENER - IE 10、Safari*/ 
display: -webkit-flex;     /*NEW - Chrome*/ 
display: flex; 

-webkit-box-orient: horizontal; 
-webkit-flex-flow: row wrap; 
-moz-flex-flow: row wrap; 
-ms-flex-flow: row wrap; 
-o-flex-flow: row wrap; 
flex-flow: row wrap;
/*flex-flow: <flex-direction>决定主轴的方向 <flex-wrap>轴线上换行;
<flex-wrap>
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
<flex-direction>
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。*/}

/*** 横向主轴上的对齐方式 ***/
.justify-1/*（默认值）：左对齐*/ { -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; }
.justify-2/*右对齐*/ { -webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; }
.justify-3/*居中*/ { -webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; }
.justify-4/*两端对齐，项目之间的间隔都相等*/ { -webkit-box-pack: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; }
.justify-5/*每个项目两侧的间隔相等*/ { -webkit-box-pack: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; }

/*** 纵向主轴上的对齐方式 ***/
.align-1/*交叉轴的起点对齐*/ { -webkit-box-align: lex-start; -webkit-align-items: lex-start; -moz-align-items: lex-start; -ms-align-items: lex-start; -o-align-items: lex-start; align-items:lex-start;}
.align-2/*交叉轴的终点对齐*/ { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; }
.align-3/*交叉轴的中点对齐*/ { -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; }
.align-4/*项目的第一行文字的基线对齐*/ { -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; -o-align-items: baseline; align-items: baseline; }
.align-5/*默认值，将占满整个容器的高度*/ { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; }

/*** align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 ***/
.cross-1/*与交叉轴的起点对齐*/ { -webkit-box-align-content: flex-start; -webkit-align-content: flex-start; -moz-align-content: flex-start; -ms-align-content: flex-start; -o-align-content: flex-start; align-content: flex-start; }
.cross-2/*与交叉轴的终点对齐*/ { -webkit-box-align-content: flex-end; -webkit-align-content: flex-end; -moz-align-content: flex-end; -ms-align-content: flex-end; -o-align-content: flex-end; align-content: flex-end; }
.cross-3/*与交叉轴的中点对齐*/ { -webkit-box-align-content: center; -webkit-align-content: center; -moz-align-content: center; -ms-align-content: center; -o-align-content: center; align-content: center; }
.cross-4/*与交叉轴两端对齐，轴线之间的间隔平均分布*/ { -webkit-box-align-content: space-between; -webkit-align-content: space-between; -moz-align-content: space-between; -ms-align-content: space-between; -o-align-content: space-between; align-content: space-between; }
.cross-5/*每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍。*/ { -webkit-box-align-content: space-around; -webkit-align-content: space-around; -moz-align-content: space-around; -ms-align-content: space-around; -o-align-content: space-around; align-content: space-around; }
.cross-6/*（默认值）：轴线占满整个交叉轴。*/ { -webkit-box-align-content: stretch; -webkit-align-content: stretch; -moz-align-content: stretch; -ms-align-content: stretch; -o-align-content: stretch; align-content: stretch; }

/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
/*该属性可能取6个值，除了auto，其他都与align-items属性完全一致。*/
.self-1 { -webkit-box-align-self: auto; -webkit-align-self: auto; -moz-align-self: auto; -ms-align-self: auto; -o-align-self: auto; align-self: auto; }
.self-2 { -webkit-box-align-self: flex-start; -webkit-align-self: flex-start; -moz-align-self: flex-start; -ms-align-self: flex-start; -o-align-self: flex-start; align-self: flex-start; }
.self-3 { -webkit-box-align-self: flex-end; -webkit-align-self: flex-end; -moz-align-self: flex-end; -ms-align-self: flex-end; -o-align-self: flex-end; align-self: flex-end; }
.self-4 { -webkit-box-align-self: center; -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; -o-align-self: center; align-self: center; }
.self-5 { -webkit-box-align-self: baseline; -webkit-align-self: baseline; -moz-align-self: baseline; -ms-align-self: baseline; -o-align-self: baseline; align-self: baseline; }
.self-6 { -webkit-box-align-self: stretch; -webkit-align-self: stretch; -moz-align-self: stretch; -ms-align-self: stretch; -o-align-self: stretch; align-self: stretch; }

/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}*/
/*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/
.flex-auto { flex: auto }/*(1 1 auto)*/
.flex-none { flex: none }/*(0 0 auto)*/

/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.order-1 {
-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
-ms-flex-order: 1;              /* TWEENER - IE 10 */
-webkit-order: 1;               /* NEW - Chrome */
order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.order-2 {-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2;-ms-flex-order: 2;-webkit-order: 2;order: 2;}
.order-3 {-webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3;-ms-flex-order: 3;-webkit-order: 3;order: 3;}
.order-4 {-webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4;-ms-flex-order: 4;-webkit-order: 4;order: 4;}
.order-5 {-webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5;-ms-flex-order: 5;-webkit-order: 5;order: 5;}
.order-6 {-webkit-box-ordinal-group: 6; -moz-box-ordinal-group: 6;-ms-flex-order: 6;-webkit-order: 6;order: 6;}