.flex(@media) {
    display: flex;
    &.row-@{media} {
        flex-direction: row;
    }
    &.row-@{media}-inv {
        flex-direction: row-reverse;
    }
    &.col-@{media} {
        flex-direction: column;
    }
    &.col-@{media}-inv {
        flex-direction: column-reverse;
    }
    @main-axis-align: {
        start: flex-start;
        center: center;
        end: flex-end;
        space: space-around;
        even: space-evenly;
        between: space-between;
        baseline: baseline;
    }
    each(@main-axis-align, {
        &.rm-@{key}-@{media} {
            justify-content: @value;
        }
        &.cm-@{key}-@{media} {
            align-content: @value;
        }
    });
    @cross-axis-align: {
        start: flex-start;
        center: center;
        end: flex-end;
        stretch: stretch;
        baseline: baseline;
    }
    each(@cross-axis-align, {
        &.rc-@{key}-@{media} {
            align-items: @value;
        }
        .as-@{key}-@{media} {
            align-self: @value;
        }
    });
    each(range(1, 10), .(@i) {
        .extend-@{i}-@{media} {
            flex-grow: @i;
        }
        .shrink-@{i}-@{media} {
            flex-shrink: @i;
        }
    });
    @special-width: {
        min: min-content;
        max: max-content;
        fit: fit-content;
    };
    each(@special-width, {
        .w-@{key}-@{media} {
            width: @value;
        }
    });
    @basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24;
    each(@basis-percent, .(@max) {
        each(range(1, @max), .(@i) {
            .b-@{i}-@{max}-@{media} {
                flex-basis: percentage(@i / @max);
            }
            .w-@{i}-@{max}-@{media} {
                width: percentage(@i / @max);
            }
        });
    });
    @wrap-modes: {
        none: nowrap;
        wrap: wrap;
        inv: wrap-reverse; 
    }
    each(@wrap-modes, {
        &.w-@{key}-@{media} {
            flex-wrap: @value;
        }
    })
}

.text-align(@media) {
    @align: {
        l: left; 
        c: center;
        r: right;
    }
    each(@align, {
        &.align-@{key}-@{media} {
            text-align: @value;
        }
    })
}