.d-flex, .flex, .display-flex {display:flex}

.child-flex1 > *,
.flex1 {flex:1 1 10em}
.child-flex1-5 > *,
.flex1-5 {flex:1.5 1.5 15em}
.child-flex2 > *,
.flex2 {flex:2 2 20em}
.flex3 {flex:3 3 30em}
.flex4 {flex:4 4 40em}
.flex5 {flex:5 5 50em}
.flex6 {flex:6 6 60em}

.flex-1, .flex-grow-1,
.child-last-flex-1,
.child-flex-1 > * {flex-grow:1}

.flex-1-5 {flex-grow:1.5}
.flex-grow-2,.child-flex-2 > *,
.flex-2 {flex-grow:2}

.flex-grow-3,.flex-3 {flex-grow:3}
.flex-grow-4,.flex-4 {flex-grow:4}
.flex-grow-5,.flex-5 {flex-grow:5}
.flex-grow-6,.flex-6 {flex-grow:6}

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

.flex-stack, .flex-stacked, .flex-column, .flex-columns, .flex-direction-column
{flex-direction: column;@extend .flex}

.flex-reverse
{flex-direction: row-reverse;@extend .flex}

.flex-stack-reverse, .flex-column-reverse, .flex-columns-reverse, .flex-direction-column-reverse,
.flex-reverse.flex-stacked, .flex-reverse.flex-stack
{flex-direction: column-reverse;@extend .flex}


.flex-inline, .flex-row, .flex-rows, .flex-direction-row
{flex-direction: row;@extend .flex}

.flex-row-wrap, .flex-wrap-rows, .flex-wrap-inline, .flex-flow-inline
{flex-wrap:wrap;flex-direction:row;@extend .flex}

.flex-column-wrap, .flex-wrap-columns, .flex-wrap-stack, .flex-wrap-stacked, .flex-flow-stack, .flex-flow-stacked,
.flex-stacked.flex-wrap, .flex-stack.flex-wrap
{flex-wrap:wrap;flex-direction:column;@extend .flex}

.justify-left {justify-content:flex-start}
.flex-left {@extend .flex, .justify-left}

.justify-center {justify-content:center}
.flex-center {@extend .flex, .justify-center}

.justify-right {justify-content:flex-end}
.flex-right {@extend .flex, .justify-right}

.justify-apart, .justify-space-between {justify-content:space-between}
.flex-apart, .flex-space-between {@extend .flex, .justify-apart}

.justify-space-around {justify-content:space-around}
.flex-evenly, .flex-space-around {@extend .flex, .justify-space-around}

.align-top, .flex-valign, .flex-top, .flex-valign-top {align-items:flex-start;@extend .flex}

.align-center {align-items:center}
.flex-valign-center, .flex-valign-middle {@extend .flex, .align-center}

.align-bottom,.align-end {align-items:flex-end}
.flex-bottom, .flex-valign-bottom {@extend .flex, .align-bottom}

.align-fill, .align-stretch {align-items:stretch}
.flex-fill {@extend .flex, .align-fill}

.align-baseline {align-items:baseline}
.flex-baseline {@extend .flex, .align-baseline}


.flex-stack.flex-center, .flex-stacked.flex-center, .flex-column.flex-center, .flex-columns.flex-center, .flex-direction-column.flex-center,
.flex-stack-reverse.flex-center, .flex-column-reverse.flex-center, .flex-columns-reverse.flex-center, .flex-direction-column-reverse.flex-center
{align-items:center}
.flex-stack.flex-left, .flex-stacked.flex-left, .flex-column.flex-left, .flex-columns.flex-left, .flex-direction-column.flex-left,
.flex-stack-reverse.flex-left, .flex-column-reverse.flex-left, .flex-columns-reverse.flex-left, .flex-direction-column-reverse.flex-left
{align-items:flex-start}
.flex-stack.flex-right, .flex-stacked.flex-right, .flex-column.flex-right, .flex-columns.flex-right, .flex-direction-column.flex-right,
.flex-stack-reverse.flex-right, .flex-column-reverse.flex-right, .flex-columns-reverse.flex-right, .flex-direction-column-reverse.flex-right
{align-items:flex-end}