Flexbox example

flexbox.scss

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
    #{"--" + $prefix + "-" + $property}: #{$value};
  }
  #{$property}: $value;
}

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

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

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex: $values;
  -webkit-flex: $values;
  -ms-flex: $values;
  flex: $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

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


@mixin flex_direction($direction) {
  @include prefix(flex-direction, $direction, (webkit, moz, ms));
}

@mixin flex_wrap($wrap) {
  @include prefix(flex-wrap, $wrap, (webkit, moz, ms));
}

@mixin flex_flow($flow) {
  @include prefix(flex-flow, $flow, (webkit, moz, ms));
}

@mixin flex_grow($grow) {
  @include prefix(flex-grow, $grow, (webkit, moz, ms));
}

@mixin flex_shrink($shrink) {
  @include prefix(flex-shrink, $shrink, (webkit, moz, ms));
}

@mixin flex_basis($width) {
  @include prefix(flex-basis, $width, (webkit, moz, ms));
}

@mixin align_content($align) {
  @include prefix(align-content, $align, (webkit, moz, ms));
}

@mixin align_items($align) {
  @include prefix(align-items, $align, (webkit, moz, ms));
}

@mixin align_self($align) {
  @include prefix(align-self, $align, (webkit, moz, ms));
}

These are adapted from mixins I have found in bourbon, compass, and likely Hugo Giraudel