_flex.scss

$flex-justify: (
        'start' : 'flex-start',
        'end' : 'flex-end',
        'center' : 'center',
        'between' : 'space-between',
        'around' : 'space-around'
);

$flex-align: (
        'start' : 'flex-start',
        'end' : 'flex-end',
        'center' : 'center',
        'stretch' : 'stretch',
        'base' : 'baseline'
);

$flex-direction: (
        'ltr' : 'row',
        'rtl' : 'row-reverse',
        'ttb' : 'column',
        'btt' : 'column-reverse'
);

$flex-wrap: (
        'nowrap' : 'nowrap',
        'wrap' : 'wrap',
        'wrap-reverse' : 'wrap-reverse',
        'reverse' : 'wrap-reverse' // alias for wrap-reverse
);

.flex {
  &-container {
    display: flex;

    &.justify {
      justify-content: #{map_get($flex-justify, 'start')};
      @each $class_modifier, $value in $flex-justify {
        &--#{$class_modifier} {
          justify-content: #{$value};
        }
      }
    }

    &.align {
      align-items: #{map_get($flex-align, 'start')};
      @each $class_modifier, $value in $flex-align {
        &--#{$class_modifier} {
          align-items: #{$value};
        }
      }
    }

    &.direction {
      flex-direction: #{map_get($flex-direction, 'ltr')};
      @each $class_modifier, $value in $flex-direction {
        &--#{$class_modifier} {
          flex-direction: #{$value};
        }
      }
    }

    &.wrap {
      flex-wrap: #{map_get($flex-wrap, 'nowrap')};
      @each $class_modifier, $value in $flex-wrap {
        &--#{$class_modifier} {
          flex-wrap: #{$value};
        }
      }
    }
  }
}