scss Flexbox SASS Mixin:全部

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss Flexbox SASS Mixin:全部相关的知识,希望对你有一定的参考价值。

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

以上是关于scss Flexbox SASS Mixin:全部的主要内容,如果未能解决你的问题,请参考以下文章

scss Flexbox SASS Mixin:10。订购

scss Flexbox SASS Mixin:7。对齐项目

scss Flexbox SASS Mixin:6。柔性流动

scss Flexbox SASS Mixin:5。柔性包装

scss Flexbox SASS Mixin:4。弯曲方向

scss Flexbox SASS Mixin:3。证明内容