/* // flex_common */
.fx-container {
  height: 100%;
  display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;     /* 老版本语法: Firefox (buggy) */
  display:box;
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.fx-row {
  display: -webkit-box;
  display: -moz-box;
  display:box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row; }

/**
 * 向从左到右排列（右边对齐）
 * <div class="fx-row"></div>
 */
.fx-row-reverse {
  display: -webkit-box;
  display: -moz-box;
  display:box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

/**
 * 纵向从上往下排列（顶对齐）
 * <div class="fx-column"></div>
 */
.fx-column {
  display: -webkit-box;
  display: -moz-box;
  display:box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

/**
 * 纵向从上往下排列（底部对齐）
 * <div class="fx-column"></div>
 */
.fx-column-reverse {
  display: -webkit-box;
  display: -moz-box;
  display:box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

/**
 * wrap策略
 */
.fx-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap;
}

.fx-nowrap {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}

/**
 * 子项目排列
 * <div class="fx-col"></div>
 */
.fx, .fx-1, .fx-2, .fx-3, .fx-4, .fx-5, .fx-6, .fx-7, .fx-8, .fx-9 {

  width: 100%;
  min-width:0;
}

/** auto(1 1 auto) **/
.fx-auto {
  -webkit-box-flex: auto;
  -webkit-flex: auto;
  -moz-box-flex: auto;
  -moz-flex: auto;
  -ms-flex: auto;
  flex: auto; }

.fx-none {
  -webkit-box-flex: none;
  -webkit-flex: none;
  -moz-box-flex: none;
  -moz-flex: none;
  -ms-flex: none;
  flex: none; }

.fx {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.fx-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.fx-2 {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -moz-box-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2; }

.fx-3 {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -moz-box-flex: 3;
  -moz-flex: 3;
  -ms-flex: 3;
  flex: 3; }

.fx-4 {
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -moz-box-flex: 4;
  -moz-flex: 4;
  -ms-flex: 4;
  flex: 4; }

.fx-5 {
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -moz-box-flex: 5;
  -moz-flex: 5;
  -ms-flex: 5;
  flex: 5; }

.fx-6 {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  -moz-box-flex: 6;
  -moz-flex: 6;
  -ms-flex: 6;
  flex: 6; }

.fx-7 {
  -webkit-box-flex: 7;
  -webkit-flex: 7;
  -moz-box-flex: 7;
  -moz-flex: 7;
  -ms-flex: 7;
  flex: 7; }

.fx-8 {
  -webkit-box-flex: 8;
  -webkit-flex: 8;
  -moz-box-flex: 8;
  -moz-flex: 8;
  -ms-flex: 8;
  flex: 8; }

.fx-9 {
  -webkit-box-flex: 9;
  -webkit-flex: 9;
  -moz-box-flex: 9;
  -moz-flex: 9;
  -ms-flex: 9;
  flex: 9; }

/**
 * 栅格布局
 */
.grid-5 {
  width: 5%; }

.grid-10 {
  width: 10%; }

.grid-15 {
  width: 15%; }

.grid-20 {
  width: 20%; }

.grid-25 {
  width: 25%; }

.grid-30 {
  width: 30%; }

.grid-33 {
  width: 33.333333333333336%; }

.grid-40 {
  width: 40%; }

.grid-50 {
  width: 50%; }

.grid-60 {
  width: 60%; }

.grid-66 {
  width: 66.66666666666666%; }

.grid-70 {
  width: 70%; }

.grid-75 {
  width: 75%; }

.grid-80 {
  width: 80%; }

.grid-85 {
  width: 85%; }

.grid-90 {
  width: 90%; }

.grid-95 {
  width: 95%; }

.grid-100 {
  width: 100%; }

/**
 * 垂直方向
 * 子元素沿着侧轴排列方式
 * align-items : flex-start | flex-end | center | baseline | stretch;
 */
.fx-row-top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }

.fx-row-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end; }

.fx-row-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.fx-row-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch; }

.fx-row-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  align-items: baseline; }

/**
 * 水平方向
 * 子元素沿着主轴排列方式
 * justify-content: flex-start | flex-end | center | space-between | space-around;
 */
.fx-row-left {
  -webkit-box-pack: flex-star;
  -ms-flex-pack: flex-star;
  -webkit-justify-content: flex-star;
  -moz-justify-content: flex-star;
  justify-content: flex-star; }

.fx-row-middle {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

.fx-row-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end; }

.fx-row-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.fx-row-space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around; }

/**
 * 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列
 */
.fx-col-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }

.fx-col-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; }

.fx-col-center {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

.fx-col-left {
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start; }

.fx-col-right {
  -webkit-align-content: flex-end;
  -moz-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end; }

.fx-col-middle {
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center; }

.fx-col-space-between {
  -webkit-align-content: space-between;
  -moz-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between; }

.fx-col-space-around {
  -webkit-align-content: space-around;
  -moz-align-content: space-around;
  -ms-flex-line-pack: space-around;
  align-content: space-around; }