Add the moz-box

[pimmink]

The mixin is great! But you forgot the moz-box.

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

@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
🔴display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}

@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
🔴-moz-box-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
🔴-moz-box-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
🔴-moz-box-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: center;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
🔴-moz-box-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}

@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
🔴-moz-box-align: start;
🔴-ms-grid-row-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
🔴-moz-box-align: end;
🔴-ms-grid-row-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
🔴-moz-box-align: $value;
🔴-ms-grid-row-align: $value;
}
-webkit-align-items: $value;
🔴-moz-align-items: $value;
align-items: $value;
}

And -ms-flex-wrap is nowrap not none

// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
🔴-ms-flex-wrap: nowrap;
} @else {
🔴 -ms-flex-wrap: $value;
}
flex-wrap: $value;