@include b('flex') { display: flex; @include m('row') { flex-direction: row; } @include m('row-reverse') { flex-direction: row-reverse; } @include m('column') { flex-direction: column; } @include m('column-reverse') { flex-direction: column-reverse; } @include m('wrap') { flex-wrap: wrap; } @include m('wrap-reverse') { flex-wrap: wrap-reverse; } @each $a in ['between', 'around', 'center', 'start', 'end '] { @if $a == 'between' or $a == 'around' { @include m('justify-#{$a}') { justify-content: space-#{$a}; } } @else { @include m('justify-#{$a}') { justify-content: #{$a}; } } } @each $a in ['stretch', 'center', 'start', 'end ', 'baseline'] { @if $a == 'start' or $a == 'end' { @include m('items-#{$a}') { align-items: flex-#{$a}; } } @else { @include m('items-#{$a}') { align-items: #{$a}; } } } @each $a in ['stretch', 'center', 'start', 'end ', 'between', 'around'] { @if $a == 'start' or $a == 'end' { @include m('align-#{$a}') { align-content: flex-#{$a}; } } @else if $a == 'between' or $a == 'around'{ @include m('align-#{$a}') { align-content: space-#{$a}; } } @else { @include m('align-#{$a}') { align-content: #{$a}; } } } @for $i from 1 through 24 { @include m(#{$i}) { flex: #{$i}; } } }