_flexbox-mixin.scss

/*  ====================  */
/*  container attributes  */
/*  ====================  */

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

/* row | column | row-reverse | column-reverse */

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

/* flex-start | flex-end | center | stretch | baseline */

@mixin new_align-items ($val) {
  @if $val == flex-start {
    -ms-flex-align: start;
  }
  @else if $val == flex-end {
    -ms-flex-align: end;
  }
  @else {
    -ms-flex-align: $val;
  }
  -webkit-align-items: $val;
  align-items: $val
}

/* flex-start | flex-end | center | space-around | space-between | stretch */

@mixin new_align-content ($val) {
  @if $val == flex-start {
    -ms-flex-line-pack: start;
  }
  @else if $val == flex-end {
    -ms-flex-line-pack: end;
  }
  @else if $val == space-around {
    -ms-flex-line-pack: distribute;
  }
  @else if $val == space-between {
    -ms-flex-line-pack: justify;
  }
  @else {
    -ms-flex-line-pack: $val;
  }
  -webkit-align-content: $val;
  align-content: $val
}


/* flex-start | flex-end | center | space-around | space-between */

@mixin new_justify-content ($val) {
  @if $val == flex-start {
    -ms-flex-pack: start;
  }
  @else if $val == flex-end {
    -ms-flex-pack: end;
  }
  @else if $val == space-around {
    -ms-flex-pack: distribute;
  }
  @else if $val == space-between {
    -ms-flex-pack: justify;
  }
  @else {
    -ms-flex-pack: $val;
  }
  -webkit-justify-content: $val;
  justify-content: $val
}

/* nowrap | wrap | wrap-reverse */

@mixin new_flex-wrap ($val) {
  @if $val == nowrap {
    -ms-flex-wrap: none;
  }
  @else if $val == wrap or $val == wrap-reverse {
    -ms-flex-wrap: wrap;
  }
  -webkit-flex-wrap: $val;
  flex-wrap: $val;
}

/*  ================  */
/*  child attributes  */
/*  ================  */

/* number */

@mixin new_flex-grow($val) {
  -ms-flex-positive: $val;
  -webkit-flex-grow: $val;
  flex-grow: $val;
}

/* number */

@mixin new_flex-shrink($val) {
  -ms-flex-negative: $val;
  -webkit-flex-shrink: $val;
  flex-shrink: $val;
}

/* px | em | % | auto */

@mixin new_flex-basis($val) {
  -ms-flex-preffered-size: $val;
  -webkit-flex-basis: $val;
  flex-basis: $val;
}

/* use shorthand whenever possible since ie10 uses different defaults  */
/* 0 1 auto */
/* just @include new_flex() for default values of 0 1 auto */

@mixin new_flex($grow:0, $shrink:1, $basis:auto) {
  -ms-flex: $grow $shrink $basis;
  -webkit-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

/* auto | flex-start | flex-end | center | stretch | baseline; */

@mixin new_align-self ($val) {
  @if $val == flex-start {
    -ms-flex-item-align: start;
  }
  @if else $val == flex-end {
    -ms-flex-item-align: end;
  }
  @else {
    -ms-flex-item-align: $val;
  }
  -webkit-align-self: $val;
  align-self: $val;
}

/* number */

@mixin new_flex-order($val) {
  -ms-flex-order: $val;
  -webkit-flex-order: $val;
  flex-order: $val;
}