.flex {
    display: flex;
    &-column {
        flex-direction: column;
    }
    &-row {
        flex-direction: row;
    }
    &-rowreverse {
        flex-direction: row-reverse;
    }
    &-columnreverse {
        flex-direction: column-reverse;
    }
    &.align {
        &-center {
            align-items: center;
        }
        &-start {
            align-items: flex-start;
        }
        &-end {
            align-items: flex-end;
        }
        &-stretch {
            align-items: stretch;
        }
    }
    &.justify {
        &-center {
            justify-content: center;
        }
        &-start {
            justify-content: flex-start;
        }
        &-end {
            justify-content: flex-end;
        }
        &-stretch {
            justify-content: stretch;
        }
        &-between {
            justify-content: space-between;
        }
    }
    &.wrap {
        &-wrap {
            flex-wrap: wrap;
        }
        &-nowrap {
            flex-wrap: nowrap;
        }
        &-wrapreverse {
            flex-wrap: wrap-reverse;
        }
    }
    &.fluid {
        width: 100%;
    }
}

$gap-unit: 8px;

.gap {
    --size-100: #{$gap-unit};

    @for $i from 1 through 18 {
        &-#{$i * 100} {
            gap: calc(#{$i} * var(--size-100));
        }
    }
}