diff --git a/mixin/_layout.scss b/mixin/_layout.scss index 1c6ba36..464b9d9 100644 --- a/mixin/_layout.scss +++ b/mixin/_layout.scss @@ -20,6 +20,10 @@ column-gap: list.nth($gap, 1); row-gap: list.nth($gap, 2); + & > * { + flex: 1 0 auto; + } + @if list.length($bpColumns) > 0 { @for $bpIndex from 1 through list.length($bpColumns) { $bp: list.nth($bpColumns, $bpIndex); @@ -33,6 +37,9 @@ @if list.length($minmax) == 2 { $max: list.nth($minmax, 2); } + $length: list.length($columns); + $childs: $length + 'n+' + $i; + & > *:nth-child(#{$i}) { @if math.unit($min) == "" and math.unit($max) == "" { flex: $max $min min-content; @@ -60,12 +67,36 @@ } } } + + & > *:nth-child(#{$childs}) { + @if math.unit($min) == "" and math.unit($max) == "" { + flex: $max $min min-content; + } @else if math.unit($min) == "" { + flex: 1 $min auto; + } @else if math.unit($max) == "" { + flex: $max 0 auto; + } @else { + flex: 1 0 auto; + } + + @if math.unit($min) != "" { + @if $direction == 'row' { + min-width: $min; + } @else { + min-height: $min; + } + } + + @if math.unit($max) != "" { + @if $direction == 'row' { + max-width: $max; + } @else { + max-height: $max; + } + } + } } } } - } @else { - & > * { - flex: 1 0 auto; - } } }