Skip to content

Instantly share code, notes, and snippets.

@mashirozx
Last active March 13, 2024 08:23
Show Gist options
  • Save mashirozx/c0691c3b8ed3f1f63722883649d41c18 to your computer and use it in GitHub Desktop.
Save mashirozx/c0691c3b8ed3f1f63722883649d41c18 to your computer and use it in GitHub Desktop.
Flex box gap polyfill with scss mixin
@use 'sass:math';
@mixin _flex-gap($gap, $row: true) {
$margin: math.div($gap, 2);
$transform: -$margin;
@if $row {
margin-left: $transform;
margin-right: $transform;
} @else {
margin-top: $transform;
margin-bottom: $transform;
}
> * {
@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 if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
@include _flex-gap($gap, true);
@include _flex-gap($gap, false);
} @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
@include _flex-gap($gap, true);
@include _flex-gap($gap, false);
} @else {
@error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
}
}
@mixin _flex-gap-unset($row: true) {
$margin: 0;
$transform: 0;
@if $row {
margin-left: $transform;
margin-right: $transform;
} @else {
margin-top: $transform;
margin-bottom: $transform;
}
> * {
@if $row {
margin-left: $margin;
margin-right: $margin;
} @else {
margin-top: $margin;
margin-bottom: $margin;
}
}
}
// unset flex-gap, used in @media screen width rules
@mixin flex-gap-unset($flex-flow: 'row nowrap') {
@if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
@include _flex-gap-unset(true);
} @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
@include _flex-gap-unset(false);
} @else if $flex-flow== 'row wrap' or $flex-flow== 'row-reverse wrap' {
@include _flex-gap-unset(true);
@include _flex-gap-unset(false);
} @else if $flex-flow== 'column wrap' or $flex-flow== 'column-reverse wrap' {
@include _flex-gap-unset(true);
@include _flex-gap-unset(false);
} @else {
@error "The second paramater $flex-flow is set to be '#{$flex-flow}', which is illegal.";
}
}
@use 'polyfills';
.pagination__container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
// gap: 6px;
@include polyfills.flex-gap(6px, 'row wrap');
.item__wrapper {
flex: 1 1 auto;
width: 100%;
font-size: 24px;
}
}
// to unset polyfill
.flex-box {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
@include polyfills.flex-gap(12px, 'row nowrap');
@media screen and (max-width: 800px) {
flex-flow: column nowrap;
@include polyfills.flex-gap-unset('row nowrap');
@include polyfills.flex-gap(12px, 'column nowrap');
}
}
@mashirozx
Copy link
Author

Note: Don't do so:

div.flex-gap
  div.another-flex-with-gap

The margin property of .another-flex-with-gap will be override by the mixin, but if you are not setting any margin to it, it's OK to write so.
Instead, if you are using margin, do so:

div.flex-gap
  div.flex-item__wrapper-with-margin-setting
    div.another-flex-with-gap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment