This is a simple mixin library for SCSS

Flexbox Mixins for SCSS

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

@mixin flexDirection($direction: row) {
    $boxOrient: horizontal;
    $boxDirection: normal;
    @if $direction == row-reverse {
        $boxOrient: horizontal;
        $boxDirection: reverse;
    } @else if $direction == column {
        $boxOrient: vertical;
        $boxDirection: normal;
    } @else if $direction == column-reverse {
        $boxOrient: vertical;
        $boxDirection: reverse;
    }

    -webkit-box-orient: $boxOrient;
    -webkit-box-direction: $boxDirection;
    -webkit-flex-direction: $direction;
        -ms-flex-direction: $direction;
            flex-direction: $direction;
}

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

@mixin flexFlow($direction: row, $wrap: wrap) {
    -wrbkit-flex-flow: $direction $wrap;
        -ms-flex-flow: $direction $wrap;
            flex-flow: $direction $wrap;
}

@mixin justifyContent($value: center) {
           -webkit-box-pack: $value;
    -webkit-justify-content: $value;
              -ms-flex-pack: $value;
            justify-content: $value;
}

@mixin alignItems($value: center) {
      -webkit-box-align: $value;
    -webkit-align-items: $value;
         -ms-flex-align: $value;
            align-items: $value;
}

@mixin alignContent($value: center) {
    -webkit-align-content: $value;
       -ms-flex-line-pack: $value;
            align-content: $value;
}

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

@mixin flexGrow($integer: 0) {
     -webkit-box-flex: $integer;
    -webkit-flex-grow: $integer;
    -ms-flex-positive: $integer;
            flex-grow: $integer;
}

@mixin flexShrink($integer: 1) {
    -webkit-flex-shrink: $integer;
      -ms-flex-negative: $integer;
            flex-shrink: $integer;
}

@mixin flexBasis($length: auto) {
         -webkit-flex-basis: $length;
    -ms-flex-preferred-size: $length;
                 flex-basis: $length;
}

@mixin flexShort($flexGrow: 0,$flexShrink: 1,$flexBasis: auto) {
    -webkit-box-flex: $flexGrow;
        -webkit-flex: $flexGrow $flexShrink $flexBasis;
            -ms-flex: $flexGrow $flexShrink $flexBasis;
                flex: $flexGrow $flexShrink $flexBasis;
}

@mixin alignSelf($value: auto) {
     -webkit-align-self: $value;
    -ms-flex-item-align: $value;
             align-self: $value;
}