You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

73 lines
1.3 KiB
SCSS

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