@use '../../common/' as *;
@use 'mixin' as flex;


@mixin _flexBox  ($name : '') {
    @if ( $name != '') {
        $name : '_' + $name;
    }
    .fw#{$name}_wrap{
        @include flex.flex-wrap ('wrap')
    }
    .fw#{$name}_nowrap{
        @include flex.flex-wrap ('nowrap')
    }
    .fd#{$name}_row{
        @include flex.flex-direction(row);
    }
    .fd#{$name}_col{
        @include flex.flex-direction(column);
    }
    .fd#{$name}_row_re{
        @include flex.flex-direction(row-reverse);
    }
    .fd#{$name}_col_re{
        @include flex.flex-direction(column-reverse);
    }

    //가로정렬
    .jc#{$name}_fs{
        @include flex.justify-content(flex-start);
    }
    .jc#{$name}_fe{
        @include flex.justify-content(flex-end);
    }
    .jc#{$name}_c{
        @include flex.justify-content(center);
    }
    .jc#{$name}_sb{
        @include flex.justify-content(space-between);
    }

    //세로정렬
    .ai#{$name}_fs{
        @include flex.align-items(flex-start);
    }
    .ai#{$name}_fe{
        @include flex.align-items(flex-end);
    }
    .ai#{$name}_c{
        @include flex.align-items(center);
    }
    .ai#{$name}_stretch{
        @include flex.align-items(stretch);
    }
    .ai#{$name}_base{
        @include flex.align-items(baseline);
    }
}

.flex{
    @include flex.flex-box();
}
.flex_0_1{
    flex: 0 1 auto;
}
.flex_1_1{
    flex: 1 1 auto;
}
@include _flexBox();

@include tab {
    @include _flexBox('md');
}
@include mob {
    @include _flexBox('sm');
}