RonnieSan
2/8/2017 - 12:01 AM

FlexBox Mixins

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;
}