Flex Box

A great way to do a layout.

A great introduction to flex-box model available here: -> http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Values for flex-box classes:

• .box: [no value];

• .box-orient: horizontal | vertical | inline-axis | block-axis | inherit;

• .box-direction: normal | reverse | inherit;

• .box-pack: start | center | end | justify;

• .box-align: start | center | end | baseline | stretch;

• .box-lines: single | multiple;

• .box-flex: integer (0 * not flex);

• .box-ordinal-group: integer (1 * default).

Browsers support: IE10+, Fx, Chrome, Safari, Android Browser

Notable lack of support: IE9-, all Opera browsers*

Even tough Opera doesn't support flex-box yet, the -o- prefixes are present to provide a future-friendliness.

---

Code

.box () {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	}
.box-orient (@orient) {
	-webkit-box-orient: @orient;
	-moz-box-orient: @orient;
	-ms-box-orient: @orient;
	-o-box-orient: @orient;
	box-orient: @orient;
	}
.box-direction (@direction) {
	-webkit-box-direction: @direction;
	-moz-box-direction: @direction;
	-ms-box-direction: @direction;
	-o-box-direction: @direction;
	box-direction: @direction;
	}
.box-pack (@pack) {
	-webkit-box-pack: @pack;
	-moz-box-pack: @pack;
	-ms-box-pack: @pack;
	-o-box-pack: @pack;
	box-pack: @pack;
	}
.box-align (@align) {
	-webkit-box-align: @align;
	-moz-box-align: @align;
	-ms-box-align: @align;
	-o-box-align: @align;
	box-align: @align;
	}
.box-lines (@lines) {
	-webkit-box-lines: @lines;
	-moz-box-lines: @lines;
	-ms-box-lines: @lines;
	-o-box-lines: @lines;
	box-lines: @lines;
	}
.box-flex (@flex) {
	-webkit-box-flex: @flex;
	-moz-box-flex: @flex;
	-ms-box-flex: @flex;
	-o-box-flex: @flex;
	box-flex: @flex;
	}
.box-ordinal-group (@group) {
	-webkit-box-ordinal-group: @group;
	-moz-box-ordinal-group: @group;
	-ms-box-ordinal-group: @group;
	-o-box-ordinal-group: @group;
	box-ordinal-group: @group;
	}