2018年11月19日(月)

備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin

• 0
• 178
• 59
• 148

// --------------------------------------------------

// Flexbox SASS mixins

// The spec: http://www.w3.org/TR/css3-flexbox

// --------------------------------------------------

// Flexbox display

@mixin flexbox() {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

}

// The 'flex' shorthand

// - applies to: flex items

// , initial, auto, or none

@mixin flex($values) {

  -webkit-box-flex: $values;

     -moz-box-flex: $values;