diff --git a/mixin/_layout.scss b/mixin/_layout.scss index 464b9d9..8485c5e 100644 --- a/mixin/_layout.scss +++ b/mixin/_layout.scss @@ -17,8 +17,14 @@ align-items: stretch; align-content: stretch; flex-wrap: wrap; - column-gap: list.nth($gap, 1); - row-gap: list.nth($gap, 2); + + $columnGap: list.nth($gap, 1); + $rowGap: 0; + @if list.length($gap) == 2 { + $rowGap: list.nth($gap, 2); + } + column-gap: $columnGap; + row-gap: $rowGap; & > * { flex: 1 0 auto; @@ -40,59 +46,43 @@ $length: list.length($columns); $childs: $length + 'n+' + $i; - & > *:nth-child(#{$i}) { - @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($min) != "" { + @if $direction == 'row' { + @if $rowGap > 0 { + $min: calc(#{$min} - #{math.div($rowGap, list.length($columns) - 1)}); } } + @if $direction == 'column' { + @if $columnGap > 0 { + $min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)}); + } + } + } - @if math.unit($max) != "" { - @if $direction == 'row' { - max-width: $max; - } @else { - max-height: $max; + @if math.unit($max) != "" { + @if $direction == 'row' { + @if $rowGap > 0 { + $max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)}); + } + } + @if $direction == 'column' { + @if $columnGap > 0 { + $max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)}); } } } & > *: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; + flex: $max $min auto; + @if $direction == 'row' and $min != 0 { + min-width: $min; + } @else if $min > 0 { + min-height: $min; } - - @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; - } + @if $direction == 'row' and $max != 0 { + max-width: $max; + } @else if $max > 0 { + max-height: $max; } } }