Generated by SassMeister.com.

input.scss

/* Usefull - Display Flex */
////
/// @group UsefullClasses-Display_Flex
/// Usefull - Display Flex

%flex-parent {
	display: flex;
}

@mixin flex-parent($isFlexParent)
{
    @if $isFlexParent == true {
        @extend %flex-parent;
    }
}

@mixin flex-flow($direction) {
	&-#{$direction}-wrap {
	    @extend %flex-parent;
	    
		flex-flow: #{$direction} wrap;
	}
	
	&-#{$direction}-nowrap {
	    @extend %flex-parent;
	    
		flex-flow: #{$direction} nowrap;
	}
}
@mixin flex-flow-axis($axis) {
    @include flex-flow($axis);
    @include flex-flow(#{$axis}-reverse);
}

@mixin justify-content($isFlexParent) {
    &-flex-end {
        @include flex-parent($isFlexParent);
    	justify-content: flex-end;
	}

	&-flex-start {
	    @include flex-parent($isFlexParent);
		justify-content: flex-start;
	}

	&-center {
	    @include flex-parent($isFlexParent);
		justify-content: center;
	}

	&-space-between {
	    @include flex-parent($isFlexParent);
		justify-content: space-between;
	}

	&-space-around {
	    @include flex-parent($isFlexParent);
		justify-content: space-around;
	}

	&-space-evenly {
	    @include flex-parent($isFlexParent);
		justify-content: space-evenly;
	}
}

@mixin flex-direction($direction)
{
    &-#{$direction}
    {
        @extend %flex-parent;
        flex-direction: $direction;
    }
}

@mixin flex-direction-axis($axis)
{
   @include flex-direction($axis);
   @include flex-direction(#{$axis}-reverse);
}

@mixin spacify($attribute)
{
    /* #{$attribute} */
    .#{$attribute} {
    	&-xs {
    		#{$attribute}: var(--space-xs);
    	}
    	&-s {
    		#{$attribute}: var(--space-s);
    	}
    	&-base {
    		#{$attribute}: var(--space-base);
    	}
    	&-m {
    		#{$attribute}: var(--space-m);
    	}
    	&-l {
    		#{$attribute}: var(--space-l);
    	}
    	&-xl {
    		#{$attribute}: var(--space-xl);
    	}
    	&-xxl {
    		#{$attribute}: var(--space-xxl);
    	}
    }
}

///
.display-flex {
	@extend %flex-parent;
}

///
.flex {
    	
	@for $index from 0 through 3 {
		// Generate .flex0-3
		&#{$index} {
			flex: #{$index};
		}
		
		// Generate .flex-grow0-3
		&-grow#{$index} {
			flex-grow: #{$index};
		}
		
		// Generate .flex-shrink0-3
		&-shrink#{$index} {
			flex-shrink: #{$index};
		}
	}
	
	&-auto {
		flex: auto;
	}
	
	&-initial {
		flex: initial;
	}
	
	&-none {
		flex: none;
	}

	&-basis {
		&-initial {
			flex-basis: initial;
		}
		&-auto {
			flex-basis: auto;
		}
		&-0 {
			flex-basis: 0;
		}
	}

	&-direction {
        @include flex-direction-axis(column);
        @include flex-direction-axis(row);
	}

	&-wrap {
		flex-wrap: wrap;

		&-reverse {
			flex-wrap: wrap-reverse;
		}
	}

	&-nowrap {
		flex-wrap: nowrap;
	}
	
	&-flow {
		@include flex-flow(row);
		@include flex-flow(column);
	}
	
    &-justify {
	    &-content {
	        @include justify-content(true);
	    }
    }
}

.justify {
	&-content {
	    @include justify-content(false);
	}
}

@include spacify(gap);
@include spacify(row-gap);
@include spacify(column-gap);

output.css

/* Usefull - Display Flex */
.flex-justify-content-space-evenly, .flex-justify-content-space-around, .flex-justify-content-space-between, .flex-justify-content-center, .flex-justify-content-flex-start, .flex-justify-content-flex-end, .flex-flow-column-nowrap, .flex-flow-column-wrap, .flex-flow-row-nowrap, .flex-flow-row-wrap, .flex-direction-row-reverse, .flex-direction-row, .flex-direction-column-reverse, .flex-direction-column, .display-flex {
  display: flex;
}

.flex0 {
  flex: 0;
}
.flex-grow0 {
  flex-grow: 0;
}
.flex-shrink0 {
  flex-shrink: 0;
}
.flex1 {
  flex: 1;
}
.flex-grow1 {
  flex-grow: 1;
}
.flex-shrink1 {
  flex-shrink: 1;
}
.flex2 {
  flex: 2;
}
.flex-grow2 {
  flex-grow: 2;
}
.flex-shrink2 {
  flex-shrink: 2;
}
.flex3 {
  flex: 3;
}
.flex-grow3 {
  flex-grow: 3;
}
.flex-shrink3 {
  flex-shrink: 3;
}
.flex-auto {
  flex: auto;
}
.flex-initial {
  flex: initial;
}
.flex-none {
  flex: none;
}
.flex-basis-initial {
  flex-basis: initial;
}
.flex-basis-auto {
  flex-basis: auto;
}
.flex-basis-0 {
  flex-basis: 0;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-column-reverse {
  flex-direction: column-reverse;
}
.flex-direction-row {
  flex-direction: row;
}
.flex-direction-row-reverse {
  flex-direction: row-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-flow-row-wrap {
  flex-flow: row wrap;
}
.flex-flow-row-nowrap {
  flex-flow: row nowrap;
}
.flex-flow-column-wrap {
  flex-flow: column wrap;
}
.flex-flow-column-nowrap {
  flex-flow: column nowrap;
}
.flex-justify-content-flex-end {
  justify-content: flex-end;
}
.flex-justify-content-flex-start {
  justify-content: flex-start;
}
.flex-justify-content-center {
  justify-content: center;
}
.flex-justify-content-space-between {
  justify-content: space-between;
}
.flex-justify-content-space-around {
  justify-content: space-around;
}
.flex-justify-content-space-evenly {
  justify-content: space-evenly;
}

.justify-content-flex-end {
  justify-content: flex-end;
}
.justify-content-flex-start {
  justify-content: flex-start;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-space-between {
  justify-content: space-between;
}
.justify-content-space-around {
  justify-content: space-around;
}
.justify-content-space-evenly {
  justify-content: space-evenly;
}

/* gap */
.gap-xs {
  gap: var(--space-xs);
}
.gap-s {
  gap: var(--space-s);
}
.gap-base {
  gap: var(--space-base);
}
.gap-m {
  gap: var(--space-m);
}
.gap-l {
  gap: var(--space-l);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-xxl {
  gap: var(--space-xxl);
}

/* row-gap */
.row-gap-xs {
  row-gap: var(--space-xs);
}
.row-gap-s {
  row-gap: var(--space-s);
}
.row-gap-base {
  row-gap: var(--space-base);
}
.row-gap-m {
  row-gap: var(--space-m);
}
.row-gap-l {
  row-gap: var(--space-l);
}
.row-gap-xl {
  row-gap: var(--space-xl);
}
.row-gap-xxl {
  row-gap: var(--space-xxl);
}

/* column-gap */
.column-gap-xs {
  column-gap: var(--space-xs);
}
.column-gap-s {
  column-gap: var(--space-s);
}
.column-gap-base {
  column-gap: var(--space-base);
}
.column-gap-m {
  column-gap: var(--space-m);
}
.column-gap-l {
  column-gap: var(--space-l);
}
.column-gap-xl {
  column-gap: var(--space-xl);
}
.column-gap-xxl {
  column-gap: var(--space-xxl);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}