Mixins for cross-browser support using flexbox
@mixin display-flex($direction) {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: $direction;
-webkit-flex-direction: $direction;
flex-direction: $direction;
}
@mixin justify-content($value) {
-ms-flex-pack: ms-justify-content($value);
-webkit-justify-content: $value;
justify-content: $value;
}
@mixin flex-wrap($wrap) {
-ms-flex-wrap: ms-flex-wrap($wrap);
-webkit-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-shrink($value) {
-ms-flex-negative: $value;
-webkit-flex-shrink: $value;
flex-shrink: $value;
}
@mixin flex-grow($value) {
-ms-flex-positive: $value;
-webkit-flex-grow: $value;
flex-grow: $value;
}
@mixin align-self($alignment) {
-ms-flex-item-align: ms-align($alignment);
-webkit-align-self: $alignment;
align-self: $alignment;
}
@mixin align-items($alignment) {
-ms-flex-align: ms-align($alignment);
-webkit-align-items: $alignment;
align-items: $alignment;
}
@mixin flex-order($value) {
-webkit-box-ordinal-group: $value; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: $value; /* OLD - Firefox 19- */
-ms-flex-order: $value; /* TWEENER - IE 10 */
-webkit-order: $value;
order: $value;
}
@function ms-justify-content($value) {
@if $value == space-between {
@return justify;
}
@else if $value == space-around {
@return distribute;
}
@else if $value == flex-start {
@return start;
}
@else if $value == initial {
@return start;
}
@else if $value == flex-end {
@return end;
}
@else {
@return $value;
}
}
@function ms-flex-wrap($wrap) {
@if $wrap == nowrap {
@return none;
} @else {
@return $wrap;
}
}
@function ms-align($alignment) {
@if $alignment == flex-end {
@return end;
} @else if $alignment == flex-start {
@return start;
} @else {
@return $alignment;
}
}