@charset "utf-8";
/**
 * flex布局模块
 * --------------------------------------------------
 */

// == flex基类
// ------------------------
.flex{@include display-flex();}

// 方向
.flex-row{@include flex-direction(row,important);}
.flex-col{@include flex-direction(column,important);}
.flex-row-reverse{@include flex-direction(row-reverse,important);}
.flex-col-reverse{@include flex-direction(column-reverse,important);}

// 换行
.flex-nowrap{@include flex-wrap(nowrap,important);}
.flex-wrap{@include flex-wrap(wrap,important);}
.flex-wrap-reverse{@include flex-wrap(wrap-reverse,important);}

// == 对齐
// 主轴对齐，容器对齐
.flex-start,.flex-top{@include justify-content(flex-start,important);}
.flex-end,.flex-bottom{@include justify-content(flex-end,important);}
.flex-center{@include justify-content(center,important);}
.flex-between{@include justify-content(space-between,important);}
.flex-around{@include justify-content(space-around,important);}

// 侧轴对齐，项目对齐
.items-start,.items-top{@include align-items(flex-start,important);}
.items-end,.items-bottom{@include align-items(flex-end,important);}
.items-center{@include align-items(center,important);}
.items-baseline{@include align-items(baseline,important);}
.items-stretch{@include align-items(stretch,important);}

// 单个项目对齐
.self-start,.self-top{@include align-self(flex-start,important);}
.self-end,.self-bottom{@include align-self(flex-end,important);}
.self-center{@include align-self(center,important);}
.self-baseline{@include align-self(baseline,important);}
.self-stretch{@include align-self(stretch,important);}
.self-auto{@include align-self(auto,important);}

// 多行对齐
.content-start,.content-top{@include align-content(flex-start,important);}
.content-end,.content-bottom{@include align-content(flex-end,important);}
.content-center{@include align-content(center,important);}
.content-stretch{@include align-content(stretch,important);}
.content-between{@include align-content(space-between,important);}
.content-around{@include align-content(space-around,important);}

// 默认项目扩展比例
.flex-default{@include flex(1,1,0,important);}

// 项目扩展比例、缩放比例及宽度
.flex-auto{@include flex(1,1,auto,important);}
.flex-inherit{@include flex(0,1,auto,important);}
.flex-none{@include flex(0,0,auto,important);}


// == flex布局类
.row {
  @extend .flex;
  width: 100%;
}

.row-wrap{@extend .flex-wrap;}

.col {
  @include flex(1);
  display: block;
  width: 100%;
}

// 行垂直对齐
.row-top {@extend .items-start;}
.row-bottom {@extend .items-end;}
.row-center {@extend .items-center;}
.row-stretch {@extend .items-stretch;}
.row-baseline {@extend .items-baseline;}

// 单个伸缩项目对齐类
.col-top { @extend .self-start;}
.col-bottom {@extend .self-end;}
.col-center {@extend .self-center;}

// 自定宽度
.wd-auto{width: auto !important;}

// == 百分比和像素级定义
@for $i from 1 through 100{
  // 列百分比布局，1% - 100% flex布局定义
  .flex-#{$i}{
    @include flex(0, 0, $i * 1%,important);
    width: $i * 1% !important;
  }

  // 1%到100%百分比宽度定义
  .wd-#{$i}{
    width: 1% *$i !important;
  }

  // 基于视图宽度
  .vw-#{$i}{
    width: 1vw * $i !important;
  }

  // 基于视图高度
  .vh-#{$i}{
    height: 1vh * $i !important;
  }

  // == 像素级定义
  @if $i<= 60 {
    // 5px ~ 300px宽度定义
    .wd-px-#{$i*5}{
      width:5px *$i !important;
    }

    // 5px ~ 300px最小宽度定义
    .wd-min-#{$i*5}{
      min-width:5px *$i !important;
    }

    // flex像素宽度定义
    .flex-px-#{$i*5}{
      @include flex(0,0,$i*5px,important);
    }
  }
}

// == 浮动布局
.clearfix {
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

.fl{
  float: left !important;
}
.fr{
  float: right !important;
}


// == 其他布局

.absolute{
  position: absolute !important;
}
.relative{
  position: relative !important;
}

.fixed{
  position: fixed !important;
}

.static{
  position: static !important;
}