.flex {
    &-grow {
        flex-grow: 1 !important;

        &-0 {
            flex-grow: 0 !important;
        }
    }

    &-shrink {
        flex-shrink: 1 !important;

        &-0 {
            flex-shrink: 0 !important;
        }
    }

    &-no-wrap {
        flex-wrap: nowrap !important;
    }

    &-wrap {
        flex-wrap: wrap !important;

        &-reverse {
            flex-wrap: wrap-reverse !important;
        }
    }

    &-direction {
        &-row {
            flex-direction: row !important;
        }

        &-column {
            flex-direction: column !important;
        }

        &-row-reverse {
            flex-direction: row-reverse !important;
        }

        &-column-reverse {
            flex-direction: column-reverse !important;
        }
    }
}

.justify-content {
    &-start {
        justify-content: flex-start !important;
    }

    &-end {
        justify-content: flex-end !important;
    }

    @each $prop in center, left, normal, right, space-around, space-between,
        space-evenly, stretch
    {
        &-#{$prop} {
            justify-content: $prop !important;
        }
    }
}

.justify-items {
    @each $prop in center, end, left, normal, right, self-end, self-start, start,
        stretch
    {
        &-#{$prop} {
            justify-items: $prop !important;
        }
    }
}

.align-content {
    &-start {
        align-content: flex-start !important;
    }

    &-end {
        align-content: flex-end !important;
    }

    @each $prop in center, left, normal, right, space-around, space-between,
        space-evenly, stretch
    {
        &-#{$prop} {
            align-content: $prop !important;
        }
    }
}

.align-items {
    &-start {
        align-items: flex-start !important;
    }

    &-end {
        align-items: flex-end !important;
    }

    @each $prop in center, normal, self-start, self-end, stretch {
        &-#{$prop} {
            align-items: $prop !important;
        }
    }
}