Flexbox Mixins for IE 10

flexbox-mixins.scss

// IE flexbox details:
//
// - Flexbox in IE 10:
//   https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx
//
// - IE 11 flexbox changes (includes property/value names for IE 10)
//   https://msdn.microsoft.com/library/dn265027(v=vs.85).aspx

@mixin flexbox ($important: false) {
  display: unquote("-ms-flexbox #{if($important, '!important', null)}");
  display: unquote("flex #{if($important, '!important', null)}");
}

@mixin inline-flexbox ($important: false) {
  display: unquote("-ms-inline-flexbox #{if($important, '!important', null)}");
  display: unquote("inline-flex #{if($important, '!important', null)}");
}

@mixin align-content ($value) {
  $ms-map: (
    flex-start: start,
    flex-end: end
  );
  -ms-flex-line-pack: map-get($ms-map, $value) or $value;
  align-content: $value;
}

@mixin align-items ($value) {
  $ms-map: (
    flex-start: start,
    flex-end: end
  );
  -ms-flex-align: map-get($ms-map, $value) or $value;
  align-items: $value;
}

@mixin align-self ($value) {
  $ms-map: (
    flex-start: start,
    flex-end: end
  );
  -ms-flex-item-align: map-get($ms-map, $value) or $value;
  align-self: $value;
}

@mixin flex ($value) {
  -ms-flex: $value;
  flex: $value;
}

@mixin flex-direction ($value) {
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin flex-wrap ($value) {
  $ms-map: (
    nowrap: none
  );
  -ms-flex-wrap: map-get($ms-map, $value) or $value;
  flex-wrap: $value;
}

@mixin justify-content ($value) {
  $ms-map: (
    flex-start: start,
    flex-end: end,
    space-around: distribute,
    space-between: justify
  );
  -ms-flex-pack: map-get($ms-map, $value) or $value;
  justify-content: $value;
}

@mixin order ($value) {
  -ms-flex-order: $value;
  order: $value;
}

output.css

.test1 {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -ms-flex-wrap: none;
  flex-wrap: nowrap;
  -ms-flex-line-pack: center;
  align-content: center;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-item-align: end;
  align-self: flex-end;
  -ms-flex-order: 1;
  order: 1;
  -ms-flex-direction: column;
  flex-direction: column;
}

.test2 {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -ms-flex: 1 1 100px;
  flex: 1 1 100px;
  -ms-flex-pack: justify;
  justify-content: space-between;
}