.flex {
    display: flex;

    &.horizontal {
        flex-direction: row;

        &.top-left {
            align-items: flex-start;
            justify-content: flex-start;
        }
        &.top-right {
            align-items: flex-start;
            justify-content: flex-end;
        }
        &.bottom-left {
            align-items: flex-end;
            justify-content: flex-start;
        }
        &.bottom-right {
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
    &.vertical {
        flex-direction: column;

        &.top-left {
            align-items: flex-start;
            justify-content: flex-start;
        }
        &.top-right {
            align-items: flex-end;
            justify-content: flex-start;
        }
        &.bottom-left {
            align-items: flex-start;
            justify-content: flex-end;
        }
        &.bottom-right {
            align-items: flex-end;
            justify-content: flex-end;
        }
    }

    &.center-center {
        align-items: center;
        justify-content: center;
    }
}