Flex BEM classes

flex.css

.flex {
    display: flex
}

.flex--centered {
    justify-content: center;
}

.flex--aligned {
    align-items: center;
}

.flex--stacked {
    flex-direction: column;
}

.flex--spaced {
    justify-content: space-between;
}

.flex--guts {
    justify-content: center;
    align-items: center;
}

.flex--top {
    align-items: flex-start;
}

.flex--bottom {
    align-items: flex-end;
}

.flex--end {
    justify-content: flex-end;
}

.flex--wrap {
    flex-wrap: wrap;
}

// Child element styles

.flex__full {
    flex: 1;
}