Flexbox Quick Reference

11 Jul 2015

For anyone unfamiliar with the great CSS flexbox box-model, here’s a quick reference. For a more comprehensive guide please check CSS-Tricks on Flexbox.

.flexbox {
	display: flex || inline-flex;

	flex-direction: row || row-reverse || column || column-reverse;
	flex-wrap: nowrap || wrap || wrap-reverse;
	flex-flow: $flex-direction $flex-wrap; /* short-hand */

	justify-content: flex-start || flex-end || center || space-around ||
		space-between; /* horizontal justification */
	align-items: flex-start || flex-end || center || stretch ||
		baseline; /* vertical alignment */
}
.flexbox .el {
	flex-grow: <int>; /* e.g. [1] [333] [22] */
	flex-shrink: <int>; /* $flex-grow vice-versa */
	flex-basis: <size> || auto;
	flex: $flex-grow $flex-shrink $flex-basis; /* short-hand */

	align-self: flex-start || flex-end || center || stretch ||
		baseline; /* $align-items but for single element */
	order: <int>;
}