Flex gap mixins:
@use 'sass:math';
@mixin flex-gap($gap, $row: true, $reverse: false) {
$margin: math.div($gap, 2);
> * {
@if $row {
margin-left: $margin;
margin-right: $margin;
&:first-child {
@if $reverse {
margin-right: 0;
} @else {
margin-left: 0;
}
}
&:last-child {
@if $reverse {
margin-left: 0;
} @else {
margin-right: 0;
}
}
} @else {
margin-top: $margin;
margin-bottom: $margin;
&:first-child {
@if $reverse {
margin-bottom: 0;
} @else {
margin-top: 0;
}
}
&:last-child {
@if $reverse {
margin-top: 0;
} @else {
margin-bottom: 0;
}
}
}
}
}
Update
@use 'sass:math';
@mixin _flex-gap($gap, $row: true, $wrap: false) {
$margin: math.div($gap, 2);
$transform: calc(#{$margin} * -1);
$size: calc(100% + #{$margin} * 2);
@if $row {
margin-left: #{$transform};
width: #{$size};
} @else {
margin-top: #{$transform};
height: #{$size};
}
> * {
@if $row {
margin-left: $margin;
margin-right: $margin;
} @else {
margin-top: $margin;
margin-bottom: $margin;
}
}
}
@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
@if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
@include _flex-gap($gap, true);
} @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
@include _flex-gap($gap, false);
} @else {
@include _flex-gap($gap, true, true);
@include _flex-gap($gap, false, true);
}
}
@dimlau flex gap影响面还是比较大的,连最新版Edge for Android都不兼容,确实是不能忽略的,现成的那个postcss polyfill,有bug,而且和vite不兼容,所以最终折腾出这套mixin,保证兼容性
https://gist.github.com/mashirozx/c0691c3b8ed3f1f63722883649d41c18
Can i use flexbox-gap
Plus: the latest Edge on Android 11 doesn’t support.