FlexBox Mixins
// Auto-prefix flex property
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
// Auto-prefix the flex property
.flex-size(@arguments: 0 1 auto) {
-webkit-box-flex: @arguments;
-moz-box-flex: @arguments;
-webkit-flex: @arguments;
-ms-flex: @arguments;
flex: @arguments;
}
// Cross-browser flex row
.flex-horizontal {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
// Cross-browser flex column
.flex-vertical {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
// Cross-browser flexbox order
.flex-order(@value) {
-webkit-box-ordinal-group: @value;
-moz-box-ordinal-group: @value;
-ms-flex-order: @value;
-webkit-order: @value;
order: @value;
}