mixin flexbox

flexbox mixin 사용

CSS

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
  -moz-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin justify-content($justify) {
    -webkit-justify-content: $justify;
    -moz-justify-content: $justify;
    -ms-justify-content: $justify;
    justify-content: $justify;
    -ms-flex-pack: $justify;
  }

@mixin align-items($align) {
    -webkit-box-align: $align;
    -webkit-align-items: $align;
    -moz-align-items: $align;
    -ms-align-items: $align;
    -ms-flex-align: $align;
    align-items: $align;
  }

  @mixin flex-shrink($shrink) {
    -webkit-flex-shrink: $shrink;
       -moz-flex-shrink: $shrink;
        -ms-flex-shrink: $shrink;
            flex-shrink: $shrink;
  }

적용

div{
    @include flexbox;
    @include justify-content(center);
    @include flex-direction(row); 
    @include align-items(center);
    @include flex-shrink(0); 
}