Generated by SassMeister.com.

input.scss

$common-values: stretch center flex-start flex-end initial inherit;
$self-values: auto baseline;
$items-values: normal start end baseline;
$content-values: space-between space-around space-evenly;

@mixin align($name, $values) {
    @each $value in $values {
        &-#{$name}-#{$value}
        {
            align-#{$name}: #{$value};
        }
    }
  }
  
.align {
    @include align(self, join($common-values, $self-values));
    @include align(items, join($common-values, $items-values));
    @include align(content, join($common-values, $content-values));
}


@mixin top($direction)
{
    @if $direction == colum
    { 
        justify-content: flex-start; 
    }
    @else if $direction == colum-reverse {
        justify-content: flex-end;
    }
    @else
    {
        align-items: flex-start;
    }
}

@mixin bottom($direction)
{
    @if $direction == colum
    { 
        justify-content: flex-end; 
    }
    @else if $direction == colum-reverse {
        justify-content: flex-start;
    }
    @else
    {
        align-items: flex-end;
    }
}

@mixin vCenter($direction)
{
    @if $direction == colum or $direction == colum-reverse {
        justify-content: center;
    }
    @else
    {
        align-items: center;
    }
}

@mixin bottom($direction)
{
    @if $direction == colum
    { 
        justify-content: flex-end; 
    }
    @else if $direction == colum-reverse {
        justify-content: flex-start;
    }
    @else
    {
        align-items: flex-end;
    }
}

@mixin left($direction)
{
    @if $direction == row
    { 
        justify-content: flex-start; 
    }
    @else if $direction == row-reverse {
        justify-content: flex-end;
    }
    @else
    {
        align-items: flex-start;
    }
}

@mixin hCenter($direction)
{
    @if $direction == row or $direction == row-reverse {
        justify-content: center;
    }
    @else
    {
        align-items: center;
    }
}

@mixin right($direction)
{
    @if $direction == row
    { 
        justify-content: flex-end; 
    }
    @else if $direction == row-reverse {
        justify-content: flex-start;
    }
    @else
    {
        align-items: flex-end;
    }
}

@mixin flexPositions($direction)
{
    #{if(&, '&.top-left', '.top-left')} {
        @include top($direction);
        @include left($direction);
    }
    
    #{if(&, '&.top-center', '.top-center')} {
        @include top($direction);
        @include hCenter($direction);
    }
    
    #{if(&, '&.top-right', '.top-right')} {
        @include top($direction);
        @include right($direction);
    }
    
    #{if(&, '&.center-left', '.center-left')} {
        @include vCenter($direction);
        @include left($direction);
    }
    
    #{if(&, '&.center-center', '.center-center')} {
        @include vCenter($direction);
        @include hCenter($direction);
    }
    
    #{if(&, '&.center-right', '.center-right')} {
        @include vCenter($direction);
        @include right($direction);
    }
    
    #{if(&, '&.bottom-left', '.bottom-left')} {
        @include bottom($direction);
        @include left($direction);
    }
    
    #{if(&, '&.bottom-center', '.bottom-center')} {
        @include bottom($direction);
        @include hCenter($direction);
    }
    
    #{if(&, '&.bottom-right', '.bottom-right')} {
        @include bottom($direction);
        @include right($direction);
    }
}

.flex-direction-column
{
    @include flexPositions(colum);
}

.flex-direction-column-reverse
{
    @include flexPositions(colum-reverse);
}

.flex-direction-row-reverse
{
    @include flexPositions(row-reverse);
}

@include flexPositions(row);

.center
{
    @include vCenter(center);
    @include hCenter(center);
}

output.css

.align-self-stretch {
  align-self: stretch;
}
.align-self-center {
  align-self: center;
}
.align-self-flex-start {
  align-self: flex-start;
}
.align-self-flex-end {
  align-self: flex-end;
}
.align-self-initial {
  align-self: initial;
}
.align-self-inherit {
  align-self: inherit;
}
.align-self-auto {
  align-self: auto;
}
.align-self-baseline {
  align-self: baseline;
}
.align-items-stretch {
  align-items: stretch;
}
.align-items-center {
  align-items: center;
}
.align-items-flex-start {
  align-items: flex-start;
}
.align-items-flex-end {
  align-items: flex-end;
}
.align-items-initial {
  align-items: initial;
}
.align-items-inherit {
  align-items: inherit;
}
.align-items-normal {
  align-items: normal;
}
.align-items-start {
  align-items: start;
}
.align-items-end {
  align-items: end;
}
.align-items-baseline {
  align-items: baseline;
}
.align-content-stretch {
  align-content: stretch;
}
.align-content-center {
  align-content: center;
}
.align-content-flex-start {
  align-content: flex-start;
}
.align-content-flex-end {
  align-content: flex-end;
}
.align-content-initial {
  align-content: initial;
}
.align-content-inherit {
  align-content: inherit;
}
.align-content-space-between {
  align-content: space-between;
}
.align-content-space-around {
  align-content: space-around;
}
.align-content-space-evenly {
  align-content: space-evenly;
}

.flex-direction-column.top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-direction-column.top-center {
  justify-content: flex-start;
  align-items: center;
}
.flex-direction-column.top-right {
  justify-content: flex-start;
  align-items: flex-end;
}
.flex-direction-column.center-left {
  justify-content: center;
  align-items: flex-start;
}
.flex-direction-column.center-center {
  justify-content: center;
  align-items: center;
}
.flex-direction-column.center-right {
  justify-content: center;
  align-items: flex-end;
}
.flex-direction-column.bottom-left {
  justify-content: flex-end;
  align-items: flex-start;
}
.flex-direction-column.bottom-center {
  justify-content: flex-end;
  align-items: center;
}
.flex-direction-column.bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-direction-column-reverse.top-left {
  justify-content: flex-end;
  align-items: flex-start;
}
.flex-direction-column-reverse.top-center {
  justify-content: flex-end;
  align-items: center;
}
.flex-direction-column-reverse.top-right {
  justify-content: flex-end;
  align-items: flex-end;
}
.flex-direction-column-reverse.center-left {
  justify-content: center;
  align-items: flex-start;
}
.flex-direction-column-reverse.center-center {
  justify-content: center;
  align-items: center;
}
.flex-direction-column-reverse.center-right {
  justify-content: center;
  align-items: flex-end;
}
.flex-direction-column-reverse.bottom-left {
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-direction-column-reverse.bottom-center {
  justify-content: flex-start;
  align-items: center;
}
.flex-direction-column-reverse.bottom-right {
  justify-content: flex-start;
  align-items: flex-end;
}

.flex-direction-row-reverse.top-left {
  align-items: flex-start;
  justify-content: flex-end;
}
.flex-direction-row-reverse.top-center {
  align-items: flex-start;
  justify-content: center;
}
.flex-direction-row-reverse.top-right {
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-direction-row-reverse.center-left {
  align-items: center;
  justify-content: flex-end;
}
.flex-direction-row-reverse.center-center {
  align-items: center;
  justify-content: center;
}
.flex-direction-row-reverse.center-right {
  align-items: center;
  justify-content: flex-start;
}
.flex-direction-row-reverse.bottom-left {
  align-items: flex-end;
  justify-content: flex-end;
}
.flex-direction-row-reverse.bottom-center {
  align-items: flex-end;
  justify-content: center;
}
.flex-direction-row-reverse.bottom-right {
  align-items: flex-end;
  justify-content: flex-start;
}

.top-left {
  align-items: flex-start;
  justify-content: flex-start;
}

.top-center {
  align-items: flex-start;
  justify-content: center;
}

.top-right {
  align-items: flex-start;
  justify-content: flex-end;
}

.center-left {
  align-items: center;
  justify-content: flex-start;
}

.center-center {
  align-items: center;
  justify-content: center;
}

.center-right {
  align-items: center;
  justify-content: flex-end;
}

.bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}

.bottom-center {
  align-items: flex-end;
  justify-content: center;
}

.bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.center {
  align-items: center;
  align-items: center;
}

settings.json

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