Prefix flex for IE10 and Safari / iOS in LESS

flex.less

/*! Prefix flex for IE10 and Safari / iOS in LESS
* https://gist.github.com/codler/2148ba4ff096a19f08ea
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */

.display(@value) when (@value = flex) {
	display: -ms-flexbox; // IE10
	display: -webkit-flex; // Safari / iOS
}

.display(@value) when (@value = inline-flex) {
	display: -ms-inline-flexbox; // IE10
	display: -webkit-inline-flex; // Safari / iOS
}

.display(@value) {
	display: @value;
}

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

.flex-justify-content(@justifyContent) {
	.ms-flex-justify-content(@justifyContent); // IE10
	-webkit-justify-content: @justifyContent; // Safari / iOS
	justify-content: @justifyContent;
}

.flex-align-content(@alignContent) {
	.ms-flex-align-content(@alignContent); // IE10
	-webkit-align-content: @alignContent; // Safari / iOS
	align-content: @alignContent;
}

.flex-align-items(@alignItems) {
	.ms-flex-align-items(@alignItems); // IE10
	-webkit-align-items: @alignItems; // Safari / iOS
	align-items: @alignItems;
}

.flex-align-self(@alignSelf) {
	.ms-flex-align-self(@alignSelf); // IE10
	-webkit-align-self: @alignSelf; // Safari / iOS
	align-self: @alignSelf;
}

.flex-direction(@direction) {
	-ms-flex-direction: @direction; // IE10
	-webkit-flex-direction: @direction; // Safari / iOS
	flex-direction: @direction;
}

.flex-order(@order) {
	-ms-flex-order: @order; // IE10
	-webkit-order: @order; // Safari / iOS
	order: @order;
}

.flex-wrap(@wrap) {
	.ms-flex-wrap(@wrap); // IE10
	-webkit-flex-wrap: @wrap; // Safari / iOS
	flex-wrap: @wrap;
}

/* These are the conditional mixins for the different syntax for IE10 Flexbox */
.ms-flex-justify-content(@justifyContent) when (@justifyContent = space-between) {
	-ms-flex-pack: justify;
}

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

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

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

.ms-flex-justify-content(@justifyContent) when (@justifyContent = center) {
	-ms-flex-pack: center;
}

.ms-flex-align-content(@alignContent) when (@alignContent = space-between) {
	-ms-flex-line-pack: justify;
}

.ms-flex-align-content(@alignContent) when (@alignContent = space-around) {
	-ms-flex-line-pack: distribute;
}

.ms-flex-align-content(@alignContent) when (@alignContent = flex-start) {
	-ms-flex-line-pack: start;
}

.ms-flex-align-content(@alignContent) when (@alignContent = flex-end) {
	-ms-flex-line-pack: end;
}

.ms-flex-align-content(@alignContent) when (@alignContent = center), (@alignContent = stretch) {
	-ms-flex-line-pack: @alignContent;
}

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

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

.ms-flex-align-items(@alignItems) when (@alignItems = center), (@alignItems = baseline), (@alignItems = stretch) {
	-ms-flex-align: @alignItems;
}

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

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

.ms-flex-align-self(@alignSelf) when (@alignSelf = auto), (@alignSelf = center), (@alignSelf = baseline), (@alignSelf = stretch) {
	-ms-flex-item-align: @alignSelf;
}

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

.ms-flex-wrap(@wrap) when (@wrap = wrap), (@wrap = wrap-reverse) {
	-ms-flex-wrap: @wrap;
}