/*  flex 布局盒子 */
.fx-box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
/*  子元素换行-第一行在前 */
.fx-wrap {
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*  子元素换行-第一行在后（建议不用） */
.fx-wrap-r {
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap-reverse;
  -moz-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  -o-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
/* 子元素不换行*/
.fx-nowrap {
  -webkit-box-lines: single;
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
/* 子元素竖状布局-从上到下*/
.fx-column {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
/* 子元素竖状布局-从下到上*/
.fx-column-r {
  -webkit-box-orient: block-axis;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -o-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
/* 子元素行内布局-从左到右 */
.fx-row {
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
/* 子元素行内布局-从右到左 */
.fx-row-r {
  -webkit-box-orient: inline-axis;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
/* 子元素在主轴上居中对齐 */
.fx-justify-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}
/* 子元素在主轴上两端对齐-左右没有空余 */
.fx-justify-sb {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
/* 子元素在主轴上中部对齐-左右有空余 */
.fx-justify-sa {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
}
/* 子元素在主轴上靠（下，右）对齐 */
.fx-justify-end {
  -webkit-box-pack: 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;
}
/* 子元素在主轴上靠（上，左）部分对齐 */
.fx-justify-start {
  -webkit-box-pack: 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;
}
/* 子元素在较差轴上充满父级容器（默认值） */
.fx-align-stretch {
  -webkit-box-align: stretch;
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
/* 子元素在较差轴上中部对齐 */
.fx-align-center {
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
/* 子元素在较差轴上以第一行文字的基线对齐 */
.fx-align-baseline {
  -webkit-box-align: baseline;
  -moz-align-items: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}
/* 子元素在较差轴上以交叉轴的起点对齐 */
.fx-align-start {
  -webkit-box-align: start;
  -moz-align-items: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
/* 子元素在较差轴上以交叉轴的终点对齐 */
.fx-align-end {
  -webkit-box-align: end;
  -moz-align-items: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
/* 子元素-比其他元素少占一倍宽度 */
.fx-d5 {
  -webkit-box-flex: .5;
  -moz-box-flex: .5;
  -webkit-flex: .5;
  -ms-flex: .5;
  flex: .5;
}
/* 子元素-平均分栏 */
.fx-1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* 子元素-比其他元素多占一倍宽度 */
.fx-2 {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}
.fx-3 {
  -webkit-box-flex: 3;
  -moz-box-flex: 3;
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}
/* 子元素-显示在从左向右（从上向下）第1个位置，用于改变源文档顺序显示 */
.fx-order-1 {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
/* 子元素-显示在从左向右（从上向下）第2个位置，用于改变源文档顺序显示 */
.fx-order-2 {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}
/* 子元素-显示在从左向右（从上向下）第3个位置，用于改变源文档顺序显示 */
.fx-order-3 {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}
/* 子元素-显示在从左向右（从上向下）第4个位置，用于改变源文档顺序显示 */
.fx-order-4 {
  -webkit-box-ordinal-group: 4;
  -moz-box-ordinal-group: 4;
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}
/* 子元素-显示在从左向右（从上向下）第5个位置，用于改变源文档顺序显示 */
.fx-order-5 {
  -webkit-box-ordinal-group: 5;
  -moz-box-ordinal-group: 5;
  -ms-flex-order: 5;
  -webkit-order: 5;
  order: 5;
}
.fx-noshrink {
  -webkit-box-flex: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.fx-shrink-1 {
  -webkit-box-flex: 1.0;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
}
.fx-shrink-2 {
  -webkit-box-flex: 2.0;
  -moz-flex-shrink: 2;
  -webkit-flex-shrink: 2;
  flex-shrink: 2;
}