KNACSS/less/_02-layout.less

/* ----------------------------- */
/* ==layout and modules          */
/* ----------------------------- */

/* module, gains superpower "BFC" Block Formating Context */
.mod {
	overflow: hidden;
}

/* blocks that needs to be placed under floats */
.clear,
.line,
.row {
	clear: both;
}

/* blocks that must contain floats */
.clearfix,
.line {
	&:after {
		content: "";
		display: table;
		clear: both;
		border-collapse: collapse;
	}
}

/* simple blocks alignment */
.left {
	margin-right: auto;
}

.right {
	margin-left: auto;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

/* text and contents alignment */
.txtleft {
	text-align: left;
}

.txtright {
	text-align: right;
}

.txtcenter {
	text-align: center;
}

/* floating elements */
.fl {
	float: left;
}

img.fl {
	margin-right: @small-value;
}

.fr {
	float: right;
}

img.fr {
	margin-left: @small-value;
}

img.fl,
img.fr {
	margin-bottom: @tiny-value;
}

/* table layout */
.row {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.row > *,
.col {
	display: table-cell;
	vertical-align: top;
}

/* no table-cell for script tag when body is a .row */
body > script {
	display: none !important;
}

/* inline-block */
.inbl {
	display: inline-block;
	vertical-align: top;
}

/* flexbox layout
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/

.flexbox,
.flexbox-v {
	display : flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.flexbox-h {
	flex-direction: row;
}

.flexitem-fluid {
	flex: 1;
}

.flexitem-first {
	order : -1;
}

.flexitem-medium {
	order : 0;
}

.flexitem-last {
	order : 1;
}