KNACSS/css/flexbox.css

/* ----------------------------- */
/* ==flexbox classes */
/* ----------------------------- */

/* flexbox layout context on container */
.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
/* horizontal alignment */
.flex-h {
	    -webkit-box-orient: horizontal;
	       -moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
}
/* vertical alignment */
.flex-v {
	    -webkit-box-orient: vertical;
	       -moz-box-orient: vertical;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
/* for fluid items */
.flex-fluid {
	-moz-box-flex: 1;
	 -webkit-flex: 1;
	    -moz-flex: 1;
	     -ms-flex: 1;
	         flex: 1;
}
/* for items that must appear first */
.flex-start {
	-webkit-box-ordinal-group: -1;
	   -moz-box-ordinal-group: 0;
	           -ms-flex-order: -1;
	            -webkit-order: -1;
	               -moz-order: -1;
	                    order: -1;
}
/* for items that must appear middle */
.flex-mid {
	-webkit-box-ordinal-group: 1;
	   -moz-box-ordinal-group: 1;
	           -ms-flex-order: 1;
	            -webkit-order: 1;
	               -moz-order: 1;
	                    order: 1;
}
/* for items that must appear at the end */
.flex-end {
	-webkit-box-ordinal-group: 42;
	   -moz-box-ordinal-group: 42;
	           -ms-flex-order: 42;
	            -webkit-order: 42;
			       -moz-order: 42;
	                    order: 42;
}