/**
 * Flexbox Mixins
 * 参考:
 * https://github.com/mastastealth/sass-flex-mixin
 * http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
 */

// 任何一个容器都可以指定为 Flex 布局
.flexbox() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

// 行内元素也可以使用 Flex 布局
.inline-flex() {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

// flex-direction
// 决定主轴的排列方向
// row(默认值): 主轴为水平方向，起点在左端
// row-reverse: 主轴为水平方向，起点在右端
// column: 主轴为垂直方向，起点在上沿
// column-reverse: 主轴为垂直方向，起点在下沿
.flex-direction(@value:row) when (@value = row){
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: @value;
  -moz-flex-direction: @value;
  -ms-flex-direction: @value;
  flex-direction: @value;
}
.flex-direction(@value:row) when (@value = row-reverse){
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: @value;
  -moz-flex-direction: @value;
  -ms-flex-direction: @value;
  flex-direction: @value;
}
.flex-direction(@value:row) when (@value = column){
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: @value;
  -moz-flex-direction: @value;
  -ms-flex-direction: @value;
  flex-direction: @value;
}
.flex-direction(@value:row) when (@value = column-reverse){
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: @value;
  -moz-flex-direction: @value;
  -ms-flex-direction: @value;
  flex-direction: @value;
}

// flex-wrap
// 如果一条轴线排不下,如何换行
// nowrap(默认): 不换行
// wrap: 换行，第一行在上方
// wrap-reverse: 换行，第一行在下方
.flex-wrap(@value:nowrap) when(@value = nowrap){
  -webkit-flex-wrap: @value;
  -moz-flex-wrap: @value;
  -ms-flex-wrap: none;
  flex-wrap: @value;
}
.flex-wrap(@value:nowrap) when(@value = wrap),(@value = wrap-reverse){
  -webkit-flex-wrap: @value;
  -moz-flex-wrap: @value;
  -ms-flex-wrap: @value;
  flex-wrap: @value;
}

// flex-flow
// flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.flex-flow(@direction:row,@wrap:nowrap){
  -webkit-flex-flow: @direction @wrap;
  -moz-flex-flow: @direction @wrap;
  -ms-flex-flow: @direction @wrap;
  flex-flow: @direction @wrap;
}

// justify-content
// 项目在主轴上的对齐方式
// flex-start(默认): 左对齐
// flex-end: 右对齐
// center: 居中
// space-between: 两端对齐，项目之间的间隔都相等
// space-around: 每个项目两侧的间隔相等
.justify-content(@value: flex-start) when(@value = flex-start){
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: @value;
  -moz-justify-content: @value;
  justify-content: @value;
}
.justify-content(@value: flex-start) when(@value = flex-end){
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: @value;
  -moz-justify-content: @value;
  justify-content: @value;
}
.justify-content(@value: flex-start) when(@value = center){
  -webkit-box-pack: @value;
  -ms-flex-pack: @value;
  -webkit-justify-content: @value;
  -moz-justify-content: @value;
  justify-content: @value;
}
.justify-content(@value: flex-start) when(@value = space-between){
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: @value;
  -moz-justify-content: @value;
  justify-content: @value;
}
.justify-content(@value: flex-start) when(@value = space-around){
  -ms-flex-pack: distribute;
  -webkit-justify-content: @value;
  -moz-justify-content: @value;
  justify-content: @value;
}

// align-items
// 项目在交叉轴上如何对齐
// flex-start: 交叉轴的起点对齐
// flex-end: 交叉轴的终点对齐
// center: 交叉轴的中点对齐
// baseline: 项目的第一行文字的基线对齐
// stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
.align-items(@value: stretch) when(@value = flex-start){
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: @value;
  -moz-align-items: @value;
  align-items: @value;
}
.align-items(@value: stretch) when(@value = flex-end){
  -webkit-box-align: @value;
  -ms-flex-align: @value;
  -webkit-align-items: @value;
  -moz-align-items: @value;
  align-items: @value;
}
.align-items(@value: stretch) when(@value = center),(@value = baseline),(@value = stretch){
  -webkit-box-align: @value;
  -ms-flex-align: @value;
  -webkit-align-items: @value;
  -moz-align-items: @value;
  align-items: @value;
}

// align-content
// 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
// flex-start：与交叉轴的起点对齐
// flex-end：与交叉轴的终点对齐
// center：与交叉轴的中点对齐
// space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
// space-around：每根轴线两侧的间隔都相等
// stretch（默认值：轴线占满整个交叉轴
.align-content(@value: stretch) when(@value = flex-start){
  -ms-flex-line-pack: start;
  -webkit-align-content: @value;
  -moz-align-content: @value;
  align-content: @value;
}
.align-content(@value: stretch) when(@value = flex-end){
  -ms-flex-line-pack: end;
  -webkit-align-content: @value;
  -moz-align-content: @value;
  align-content: @value;
}
.align-content(@value: stretch) when(@value = center),(@value = space-between),(@value = space-around),(@value = stretch){
  -ms-flex-line-pack: @value;
  -webkit-align-content: @value;
  -moz-align-content: @value;
  align-content: @value;
}

// order
// 项目的排列顺序。数值越小，排列越靠前，默认为0
.order(@int: 0) {
  -webkit-box-ordinal-group: @int + 1;
   -webkit-order: @int;
      -moz-order: @int;
  -ms-flex-order: @int;
           order: @int;
}

// flex-grow
// 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
.flex-grow(@int: 0) {
   -webkit-box-flex: @int;
  -webkit-flex-grow: @int;
     -moz-flex-grow: @int;
  -ms-flex-positive: @int;
          flex-grow: @int;
}

// flex-shrink
// 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.flex-shrink(@int: 1) {
  -webkit-flex-shrink: @int;
     -moz-flex-shrink: @int;
    -ms-flex-negative: @int;
          flex-shrink: @int;
}

// flex-basis
// 在分配多余空间之前，项目占据的主轴空间
.flex-basis(@value: auto) {
       -webkit-flex-basis: @value;
          -moz-flex-basis: @value;
  -ms-flex-preferred-size: @value;
               flex-basis: @value;
}

// flex
// flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
.flex(@fg: 1, ...) {
  -webkit-box-flex:@fg;
  -moz-box-flex: @fg;
  -webkit-flex: @arguments;
  -moz-flex: @arguments;
  -ms-flex: @arguments;
  flex: @arguments;
}

// align-self
// align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
// auto(默认值)
// flex-start: 交叉轴的起点对齐
// flex-end: 交叉轴的终点对齐
// center: 交叉轴的中点对齐
// baseline: 项目的第一行文字的基线对齐
// stretch：如果项目未设置高度或设为auto，将占满整个容器的高度
.align-self(@value: auto) when(@value = flex-start){
  -ms-flex-item-align: start;
  -webkit-align-self: @value;
  -moz-align-self: @value;
  align-self: @value;
}
.align-self(@value: auto) when(@value = flex-end){
  -ms-flex-item-align: end;
  -webkit-align-self: @value;
  -moz-align-self: @value;
  align-self: @value;
}
.align-self(@value: auto) when(@value = center),(@value = baseline),(@value = stretch){
  -ms-flex-item-align: @value;
  -webkit-align-self: @value;
  -moz-align-self: @value;
  align-self: @value;
}