scss Flexbox SASS Mixin：全部

Posted 2021-05-18

@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;
}