pleshevski.ru/styles/mixins/flex.scss

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

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

@mixin flex-dir-row {
  @include dis-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

@mixin flex-dir-col {
  @include dis-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@mixin flex-dir($val) {
  @if      $val == row {@include flex-dir-row;}
  @else if $val == col {@include flex-dir-col;}
  @else {@error 'unknown flex-direction: #{$val}';}
}

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

@mixin flex-nowrap {
  @include flex-wrap(nowrap);
}

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

@mixin flex-shrink($val) {
  -ms-flex-negative: $val;
  flex-shrink: $val;
}

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

@mixin flex-jus-sta {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

@mixin flex-jus-cen {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@mixin flex-jus-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@mixin flex-jus-aro {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

@mixin flex-jus-bet {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@mixin flex-jus($val) {
  @if      $val == sta {@include flex-jus-sta;}
  @else if $val == cen {@include flex-jus-cen;}
  @else if $val == end {@include flex-jus-end;}
  @else if $val == aro {@include flex-jus-aro;}
  @else if $val == bet {@include flex-jus-bet;}
  @else {@error 'unknown flex-jus (justify-content) property: #{$val}';}
}

@mixin flex-ali-sta {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

@mixin flex-ali-cen {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@mixin flex-ali-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

@mixin flex-ali-str {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

@mixin flex-ali($val) {
  @if      $val == sta {@include flex-ali-sta;}
  @else if $val == cen {@include flex-ali-cen;}
  @else if $val == end {@include flex-ali-end;}
  @else if $val == str {@include flex-ali-str;}
  @else {@error 'unknown flex-ali (align-items) property: #{$val}';}
}

@mixin ali-self-sta {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

@mixin ali-self-cen {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

@mixin ali-self-end {
  -ms-flex-item-align: end;
  align-self: flex-end;
}

@mixin ali-self-str {
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

@mixin ali-self($val) {
  @if      $val == sta {@include ali-self-sta;}
  @else if $val == cen {@include ali-self-cen;}
  @else if $val == end {@include ali-self-end;}
  @else if $val == str {@include ali-self-str;}
  @else {@error 'unknown ali-self (align-self) property: #{$val}';}
}

@mixin flex-layout($dir: none, $ali: none, $jus: none) {
  @if $dir != none {@include flex-dir($dir);}
  @if $jus != none {@include flex-jus($jus);}
  @if $ali != none {@include flex-ali($ali);}
}