FlexBox mixins (with vendors) and utils

flexbox.sass

//**************************************************************************************************** [ FLEXBOX ]
=flexbox
	display: -webkit-box
	display: -moz-box
	display: -ms-flexbox
	display: -webkit-flex
	display: flex

// align flex items along the main axis of the current line of the flex container: flex-start | flex-end | center | space-between | space-around
=flex-justify-content ($pos)
	-webkit-box-pack: $pos
	-moz-box-pack: $pos
	-webkit-justify-content: $pos
	-ms-flex-pack: $pos
	justify-content: $pos

	@if $pos == flex-start
		-webkit-box-pack: start
		-moz-box-pack: start
		-ms-flex-pack: start

	@else if $pos == flex-end
		-webkit-box-pack: end
		-moz-box-pack: end
		-ms-flex-pack: end

	@else if $pos == space-between
		-webkit-box-pack: justify
		-moz-box-pack: justify
		-ms-flex-pack: justify

	@else if $pos == space-around
		-webkit-box-pack: justify
		-moz-box-pack: justify
		-ms-flex-pack: distribute

// align flex items along the cross axis of the current line of the flex container: flex-start | flex-end | center | baseline | stretch
=flex-align-items ($pos)
	-webkit-box-align: $pos
	-moz-box-align: $pos
	-webkit-align-items: $pos
	-ms-flex-align: $pos
	align-items: $pos

	@if $pos == flex-start
		-webkit-box-align: start
		-moz-box-align: start
		-ms-flex-align: start

	@else if $pos == flex-end
		-webkit-box-align: end
		-moz-box-align: end
		-ms-flex-align: end


=flex-direction ($pos)
	@if $pos == row
		-webkit-box-direction: normal
		-moz-box-direction: normal
		-webkit-box-orient: horizontal
		-moz-box-orient: horizontal
		-webkit-flex-direction: row
		-ms-flex-direction: row
		flex-direction: row

	@else if $pos == column
		-webkit-box-direction: normal
		-moz-box-direction: normal
		-webkit-box-orient: vertical
		-moz-box-orient: vertical
		-webkit-flex-direction: column
		-ms-flex-direction: column
		flex-direction: column

	@else if $pos == row-reverse
		-webkit-box-direction: reverse
		-moz-box-direction: reverse
		-webkit-box-orient: horizontal
		-moz-box-orient: horizontal
		-webkit-flex-direction: row-reverse
		-ms-flex-direction: row-reverse
		flex-direction: row-reverse

	@else if $pos == column-reverse
		-webkit-box-direction: reverse
		-moz-box-direction: reverse
		-webkit-box-orient: vertical
		-moz-box-orient: vertical
		-webkit-flex-direction: column-reverse
		-ms-flex-direction: column-reverse
		flex-direction: column-reverse

=flex-wrap ($pos)
	-webkit-flex-wrap: $pos
	-moz-flex-wrap: $pos
	-ms-flex-wrap: $pos
	flex-wrap: $pos

=flex-align-content ($pos)
	-webkit-align-content: $pos
	-ms-flex-line-pack: $pos
	align-content: $pos

	@if $pos == flex-start
		-ms-flex-line-pack: start
	@else if $pos == flex-end
		-ms-flex-line-pack: end
	@else if $pos == space-between
		-ms-flex-line-pack: justify
	@else if $pos == space-around
		-ms-flex-line-pack: distribute


=flex-grow ($val)
	flex-grow: $val
	-webkit-flex-grow: $val
	-moz-flex-grow: $val
	-ms-flex-grow: $val


=flex-shrink ($val)
	flex-shrink: $val
	-webkit-flex-shrink: $val
	-moz-flex-shrink: $val
	-ms-flex-shrink: $val

=flex-basis ($val)
	flex-basis: $val
	-webkit-flex-basis: $val
	-moz-flex-basis: $val
	-ms-flex-basis: $val

=flex ($grow, $shrink, $basis)
	-webkit-box-flex: $grow
	-moz-box-flex: $grow
	-webkit-flex: $grow $shrink $basis
	-ms-flex: $grow $shrink $basis
	flex: $grow $shrink $basis

=flex-order ($order)
	-webkit-box-ordinal-group: $order
	-moz-box-ordinal-group: $order
	-ms-flex-order: $order
	-webkit-order: $order
	order: $order

//**************************************************************************************************** [ MISC. FLEXBOX UTILS ]

=vertical-center
	+flexbox
	+flex-direction(column)
	+flex-justify-content(center)
	+flex-wrap(nowrap)


//**************************************************************************************************** [ COLUMNS GRID ]

=flex-columns
	+flexbox
	+flex-direction(row)
	+flex-justify-content(stretch)
	+flex-wrap(wrap)

	.col
		box-sizing: border-box
	.col-20
		width: 20%
	.col-25
		width: 25%
	.col-24
		width: 24%
	.col-33
		width: 33.33%
	.col-50
		width: 50%