Less Flexbox mixins (translation from sass)

flexbox.less

// mixins based on code from:
// https://github.com/mastastealth/sass-flex-mixin/blob/master/_flexbox.scss

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

.flex-direction-internal(@value) {
  -webkit-flex-direction: @value;
	-moz-flex-direction: @value;
	-ms-flex-direction: @value;
	flex-direction: @value;
}

.flex-direction(@value) when (@value = row-reverse) {
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  .flex-direction-internal(@value);
}

.flex-direction(@value) when (@value = column) {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  .flex-direction-internal(@value);
}

.flex-direction(@value) when (@value = column-reverse) {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  .flex-direction-internal(@value);
}

.flex-direction(@value) {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  .flex-direction-internal(@value);
}

.flex-wrap(@value) {
  -webkit-flex-wrap: @value;
	-moz-flex-wrap: @value;
  -ms-flex-wrap: @value; 
  flex-wrap: @value;
}

.flex-wrap(@value) when (@value = nowrap) {
  -webkit-flex-wrap: @value;
	-moz-flex-wrap: @value;
  -ms-flex-wrap: none; 
  flex-wrap: @value;
}

.order(@value: 0) {
	-webkit-box-ordinal-group: @value + 1;
	-webkit-order: @value;
	-moz-order: @value;
	-ms-flex-order: @value;
	order: @value;
}

.flex-grow(@value: 0) {
  -webkit-box-flex: @value;
	-webkit-flex-grow: @value;
	-moz-flex-grow: @value;
	-ms-flex-positive: @value;
	flex-grow: @value;
}

.flex-shrink(@value: 1) {
  -webkit-flex-shrink: @value;
	-moz-flex-shrink: @value;
	-ms-flex-negative: @value;
	flex-shrink: @value;
}

.flex-basis(@value: auto) {
  -webkit-flex-basis: @value;
	-moz-flex-basis: @value;
	-ms-flex-preferred-size: @value;
	flex-basis: @value;
}

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

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

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

.justify-content-internal(@value) when (@value = space-around) {
  -ms-flex-pack: distribute;
}

.justify-content-internal(@value) {
  -webkit-box-pack: @value;
  -ms-flex-pack: @value;
}

.justify-content(@value: flex-start) {
  .justify-content-internal(@value);
  -webkit-justify-content: @value;
	-moz-justify-content: @value;
	justify-content: @value;
}

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

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

.align-items-internal(@value) {
  -webkit-box-align: @value;
  -ms-flex-align: @value;
}

.align-items (@value) {
  .align-items-internal(@value);
  -webkit-align-items: @value;
	-moz-align-items: @value;
	align-items: @value;
}

.align-self-internal(@value) when (@value = flex-start) {
  -ms-flex-item-align: start;
}

.align-self-internal(@value) when (@value = flex-end) {
  -ms-flex-item-align: end;
}

.align-self-internal(@value) when (@value) {
  -ms-flex-item-align: @value;
}

.align-self(@value) {
  -webkit-align-self: @value;
	-moz-align-self: @value;
  .align-self-internal(@value);
  align-self: @value;
}

// flexbox shorthands

.flex-flow(@value) {
  // No Webkit Box fallback.
	-webkit-flex-flow: @value;
	-moz-flex-flow: @value;
	-ms-flex-flow: @value;
	flex-flow: @value;
}

.flex-flow(@direction, @wrap) {
  // No Webkit Box fallback.
	-webkit-flex-flow: @direction @wrap;
	-moz-flex-flow: @direction @wrap;
	-ms-flex-flow: @direction @wrap;
	flex-flow: @direction @wrap;
}

.flex(@value) {
  -webkit-box-flex: @value;
	-webkit-flex: @value;
	-moz-box-flex: @value;
	-moz-flex: @value;
	-ms-flex: @value;
	flex: @value;
}

.flex(@value1, @value2) {
  -webkit-box-flex: @value1;
	-webkit-flex: @value1 @value2;
	-moz-box-flex: @value1;
	-moz-flex: @value1 @value2;
	-ms-flex: @value1 @value2;
	flex: @value1 @value2;
}

.flex(@value1, @value2, @value3) {
  -webkit-box-flex: @value1;
	-webkit-flex: @value1 @value2 @value3;
	-moz-box-flex: @value1;
	-moz-flex: @value1 @value2 @value3;
	-ms-flex: @value1 @value2 @value3;
	flex: @value1 @value2 @value3;
}