Implementing Flexbox with SCSS mixins

I was scouring the internet for a good mixin for flexbox but I would always come across mixins like these,

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

with a mixin for every possible property,

@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
     -moz-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
            -ms-flex-pack: $justify;
}

While this may work for a lot of people, I still felt that it could be made simpler, or "DRY'er". I'm pretty sure someone must have done something like this before, but I couldn't find it. So after a little bit of struggling around with SCSS mixins and functions, I came up with this,

	//Get the value for justify-content
	@function getJustify($arg){
	$justify: (
	'sa':space-around,
	'sb':space-between,
	'se':space-evenly,
	'c':center,
	'fs':flex-start,
	'fe':flex-end
	);
	@each $key,$value in $justify{
	@if($key == $arg){
	@return $value;
	}
	}
	}
	//Get the value for align-items
	@function checkAlign($arg){
	$align: (
	'b':baseline,
	's':stretch,
	'c':center,
	'fs':flex-start,
	'fe':flex-end
	);
	@each $key,$value in $align{
	@if($key == $arg){
	@return $value;
	}
	}
	}
	//Display flex
	@mixin d-flex(){
	display: flex;
	@content
	}
	//Applied example
	div{
	@include d-flex{
	justify-content: getJustify(c);
	align-content: getAlign(c);
	}
	}

view raw flexbox-mixins.scss hosted with ❤ by GitHub

More functions can be created and extended into the mixin such as flex-direction, flex-wrap, flex-grow, etc. with the @content directive in a similar way. It can also be used on properties that use the same values like justify-self or align-self. I will be updating this post with a github repo for all the functions and mixins soon.

---

Would love to know if anyone finds it useful. Thanks.