Flexbox SASS Mixin: all
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin justify-content ($value) {
-webkit-justify-content: $value;
-moz-justify-content: $value;
-ms-justify-content: $value;
justify-content: $value;
}
@mixin flex-direction ($value) {
-webkit-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-wrap ($value) {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
@mixin flex-flow ($rvalue, $wvalue) {
-webkit-flex-flow: $rvalue $wvalue;
-moz-flex-flow: $rvalue $wvalue;
-ms-flex-flow: $rvalue $wvalue;
flex-flow: $rvalue $wvalue;
}
@mixin align-items ($value) {
-webkit-align-items: $value;
-moz-align-items: $value;
-ms-align-items: $value;
align-items: $value;
}
@mixin align-content ($value) {
-webkit-align-content: $value;
-moz-align-content: $value;
-ms-align-content: $value;
align-content: $value;
}
@mixin order($value) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin flex-basis ($value) {
-webkit-flex-basis: $value;
flex-basis: $value;
}
@mixin align-self ($value) {
-webkit-align-self: $value;
align-self: $value;
}