.container-center {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.item-center {
    margin: auto;
}

.item-center-distribute {
    margin: auto;
}

.item-center-y {
    margin-top: auto;
    margin-bottom: auto;
}

.item-center-x {
    margin-left: auto;
    margin-right: auto;
}

.container-center-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 0%;
    align-items: center;
    align-content: center;
    justify-content: center;
}

// New

.item--align-axis-direction {}

.container--align-axis-direction {}

@mixin container-align-properties($container-name, $item-name, $axis, $direction) {
    // Do not include styles unless in a class.
    .#{$container-name}-align-#{$axis}-#{$direction} {
        color: red;
    }

    .#{$item-name}-align-#{$axis}-#{$direction} {
        color: red;
    }
}

@include container-align-properties("container", "item", "x", "left");