.flex-box {

	@include clearfix;
	@include display(flex);
	@include flex-direction(row); // row, row-reverse, column, column-reverse
	@include flex-wrap(wrap); // nowrap, wrap, wrap-reverse
	@include justify-content(center); // flex-start, flex-end, center, space-between, space-around (for horizontal spacing of all items)
	@include align-items(center); // flex-start, flex-end, center, stretch, baseline (for vertical alignment of all individual items)
	@include align-content(stretch); // flex-start, flex-end, center, stretch, space-between, space-around (for horizontal spacing of all items)

	.item {

		// order property (lookup usage in bourbon.io)
		//@include flex-grow(1); // number, 0 default
		//@include flex-shrink(1); // number, 0 default
		//@include flex-basis(8em); // default size before space is distributed
		//@include flex(1 1 8em); // shorthand of flex-grow, flex-shrink, flex-basis
		//@include align-self(auto); // This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
		
		@include flex(1 1 24em); // shorthand of flex-grow, flex-shrink, flex-basis
		@include transition (all 0.2s ease-in-out);
	}

}