$flx-flex: ( a: auto );
$flx-flexDirection: ( r: row, rr: row-reverse, c: column, cr: column-reverse, u: unset );
$flx-justify: ( fs: flex-start, c: center, fe: flex-end, sa: space-around, sb: space-between, se: space-evenly, s: stretch, u: unset );
$flx-align: ( fs: flex-start, c: center, fe: flex-end, s: stretch, u: unset );
$flx-flexWrap: ( nw: nowrap, w: wrap, wr: wrap-reverse, u: unset );
$flx-flexGrow: ( 0, 1, 2, 3 );
$flx-flexShrink: ( 0, 1 );

$flex: (
    f: ( flex: $flx-flex ),
    fd: ( flex-direction: $flx-flexDirection ),
    jc: ( justify-content: $flx-justify ),
    js: ( justify-self: $flx-justify ),
    ai: ( align-items: $flx-align ),
    as: ( align-self: $flx-align ),
    fw: ( flex-wrap: $flx-flexWrap ),
    fg: ( flex-grow: $flx-flexGrow ),
    fs: ( flex-shrink: $flx-flexShrink ),
);

.flx {
    display: flex;
      
    &-i {
        display: inline-flex;
	}
}
.f- {
    @include isMedia() using ($mc, $mb) {
        @include isMap($flex) using ($key, $object) {
            &\: {
                @include isProp($object) using ($declaration, $values) {
                    @if type-of($values) == 'map' {
                        @include isMap($values, $mc) using ($key, $val) {
                            #{$declaration}: $val;
                        }
                    } @else {
                        @include isList($values, $mc) using ($val) {
                            #{$declaration}: $val;
                        }
                    }
                }
            }
        }
    }
}