_flex-arrange-mixin.scss

/*
 * Quickly arrange child elements using flex.
 *
 *	@param($direction, $distribution)
 *
 *		$direction: Sets the axis the items are aligned to.
 *			[v, vertical, c, column | h, horizontal, r, row]  (!optional - default = v)
 *			... amounts to `flex-direction:` ...
 *
 *		$distribution: Sets how items are arranged along main axis.
 *			[c, center | sa, a, space-around | sb, b, space-between]  (!optional - default = c)
 *			... sets the `justify-content:` property...
 *
 *	[Example Usage:]
 *
 *  .class {
 *		@include flexArrange(vertical, sa);
 *  }	
 *
 *	---OUTPUTS TO:
 *
*	.class {
 * 		display: flex;
 * 		align-items: center;
 * 		align-content: center;
 * 		flex-direction: column;
 * 		justify-content: space-around;
 *      }
 */
@mixin flexArrange($direction: v, $distribution: c) {
	// set the constants
	display: flex;
	align-items: center;
	align-content: center;
	// Set direction
	@if($direction==v or $direction=='vertical' or $direction==column) {
		flex-direction: column;
	}
	@else {
		flex-direction: row;
	}
	// Set content distribution
	@if($distribution==c or $distribution==center) {
		justify-content: center;
	}
	@else if($distribution==s or $distribution==sa or $distribution==space-around) {
		justify-content: space-around;
	}
	@else {
		justify-content: space-between;
	}
}