@charset "utf-8";
/**
 * 弹性布局，子元素排列在同一水平上
 */
@mixin box() {
  display: box !important;
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

@mixin flex() {
  -prefix-box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1 !important;
}

@mixin flex-column() {
  flex-direction: column !important;
}

@mixin flex-wrap() {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}



/*
 * ------------------------------------定位------------------------------------
 */
@mixin flex-center(){
  align-items: center;
  justify-content: center;
}

// 水平定位
@mixin flex-align-start {
  align-items: start !important;
}

@mixin flex-align-center {
  align-items: center !important;
}

@mixin flex-align-end {
  align-items: flex-end !important;
}

@mixin flex-align-around {
  align-content: space-around !important;
}

@mixin flex-align-between {
  align-content: space-between !important;
}

// 垂直定位
@mixin flex-justify-start(){
  justify-content: start !important;
}

@mixin flex-justify-center(){
  justify-content: center !important;
}

@mixin flex-justify-end(){
  justify-content: flex-end !important;
}

@mixin flex-justify-around(){
  justify-content: space-around !important;
}

@mixin flex-justify-between(){
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
}

@mixin flex-justify-start(){
  justify-content: flex-start !important;
}

.box{
  @include box();
}

.flex{
  @include flex();
}


// 垂直排版
.flex-column {
  @include flex-column();
}

// 换行
.flex-wrap{
  @include flex-wrap();
}

// 居中
.flex-center {
  @include flex-center();
}

// 水平定位
.flex-align-start {
  @include flex-align-start();
}
.flex-align-center {
  @include flex-align-center();
}
.flex-align-end {
  @include flex-align-end();
}
.flex-align-around {
  @include flex-align-around();
}
.flex-align-between {
  @include flex-align-between();
}

// 垂直定位
.flex-justify-start {
  @include flex-justify-start();
}
.flex-justify-center {
  @include flex-justify-center();
}
.flex-justify-end {
  @include flex-justify-end();
}
.flex-justify-around {
  @include flex-justify-around();
}
.flex-justify-between {
  @include flex-justify-between();
}

// 组合定位
.flex-center-between{
  @include flex-align-center();
  @include flex-justify-between();
}
.flex-center-around{
  @include flex-align-center();
  @include flex-justify-around();
}
.flex-center-start{
  @include flex-align-center();
  @include flex-justify-start();
}
.flex-center-end{
  @include flex-align-center();
  @include flex-justify-end();
}
.flex-start-start{
  @include flex-align-start();
  @include flex-justify-start();
}