//----------------------------------
//
//**
// *
// * @authors liwb(lwbhtml@163.com)
// * @date    2017/7/3 14:41
// * @version $
// * @desc flex布局相关
// */
//----------------------------------

.flexbox(@display: flex) {
  display: -webkit-box; // Old syntax
  display: ~"-webkit-@{display}";
  display: ~"-moz-@{display}";
  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
  display: ~"-ms-@{display}"; // IE11
  display: @display;
}

// The 'flex' shorthand
// This shorthand for `flex-grow`, `flex-shrink` and `flex-basis` combined.
// The second and third parameters (flex-shrink and flex-basis) are optional.
// Default is 0 1 auto.
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: 1) {
  -webkit-box-flex: @columns; // Old syntax
  -webkit-flex: @columns;
  -moz-flex: @columns;
  -ms-flex: @columns;
  flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
  -moz-flex-direction: @direction;
  -ms-flex-direction: @direction;
  flex-direction: @direction;
}

.flexbox-inline() {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

.flex-wrap(@fw) when (@fw = nowrap) {
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: none;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.flex-wrap(@fw) when (@fw = wrap) {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-wrap(@fw) when not (@fw = wrap) and not (@fw = nowrap) {
  -webkit-flex-wrap: @fw;
  -ms-flex-wrap: @fw;
  flex-wrap: @fw;
}

// Flex Direction and Wrap
// The shorthand for `flex-direction` and `flex-wrap`
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow: ~"row nowrap") {
  -webkit-flex-flow: @flow;
  -moz-flex-flow: @flow;
  -ms-flex-flow: @flow;
  flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-flex-order: @order; // Old syntax
  -webkit-order: @order;
  -moz-order: @order;
  -ms-order: @order;
  order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
  -moz-flex-grow: @grow;
  -ms-flex-grow: @grow;
  flex-grow: @grow;
}

.flex-shrink(@fs) {
  -webkit-flex-shrink: @fs;
  -ms-flex: 0 @fs auto;
  flex-shrink: @fs;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
  -moz-flex-basis: @width;
  -ms-flex-basis: @width;
  flex-basis: @width;
}

.justify-content(@jc) when (@jc = flex-start) {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.justify-content(@jc) when (@jc = flex-end) {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.justify-content(@jc) when (@jc = space-between) {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) {
  -webkit-box-pack: @jc;
  -ms-flex-pack: @jc;
  -webkit-justify-content: @jc;
  justify-content: @jc;
}

.align-items(@ai) when (@ai = flex-start) {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.align-items(@ai) when (@ai = flex-end) {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) {
  -webkit-box-align: @ai;
  -ms-flex-align: @ai;
  -webkit-align-items: @ai;
  align-items: @ai;
}

.align-content(@ai) {
  -ms-flex-line-pack: @ai;
  -webkit-align-content: @ai;
  align-content: @ai;
}

.align-self(@as) {
  -ms-flex-item-align: @as;
  -webkit-align-self: @as;
  align-self: @as;
}