//
// Flex布局
// ============================================================

.flex
    @extend .overflow-hidden
    flex: 1

// flex-wrap
.flex-wrap-wrap
    @extend .display-flex
    flex-wrap: wrap

// .justify-content-flex-start/flex-end/center
// .align-content-flex-start/flex-end/center
// .align-items-flex-start/flex-end/center
@each $styleVal in (flex-start, flex-end, center)
    .justify-content-#{$styleVal}
        @extend .display-flex
        justify-content: $styleVal

    .align-content-#{$styleVal}
        @extend .flex-wrap-wrap
        align-content: $styleVal

    .align-items-#{$styleVal}
        @extend .display-flex
        align-items: $styleVal

    .align-self-#{$styleVal}
        align-self: $styleVal

// .justify-content-space-around/space-between
// .align-content-space-around/space-between
@each $styleVal in (space-around, space-between)
    .justify-content-#{$styleVal}
        @extend .display-flex
        justify-content: $styleVal

    .align-content-#{$styleVal}
        @extend .flex-wrap-wrap
        align-content: $styleVal

// .flex-direction-row/row-reverse/column/column-reverse
@each $styleVal in (row, row-reverse, column, column-reverse)
    .flex-direction-#{$styleVal}
        @extend .display-flex
        flex-direction: $styleVal




// align-content
.align-content-stretch
    @extend .flex-wrap-wrap
    align-content: stretch