$flex-grow-levels: 0 1 2 3 4 5
$flex-align-items-alignments: flex-start flex-end center baseline stretche
$flex-justify-content-alignments: flex-start flex-end center space-between space-around

.flex-direction-column
  flex-direction: column

.flex-direction-row
  flex-direction: row

.flex-wrap-wrap
  flex-wrap: wrap

.flex-wrap-wrap-reverse
  flex-wrap: wrap-reverse

.flex-wrap-no-wrap
  flex-wrap: nowrap

.align-content-stretch
  align-content: stretch

@each $level in $flex-grow-levels
  .flex-grow-#{$level}
    flex-grow: $level
  .flex-shrink-#{$level}
    flex-shrink: $level

@each $alignment in $flex-align-items-alignments
  .align-items-#{$alignment}
    align-items: $alignment 
  .align-self-#{$alignment}
    align-self: $alignment 
  +mobile
    .align-items-#{$alignment}-mobile
      align-items: $alignment 
    .align-self-#{$alignment}-mobile
      align-self: $alignment 
  +tablet
    .align-items-#{$alignment}-tablet
      align-items: $alignment 
    .align-self-#{$alignment}-tablet
      align-self: $alignment
  +touch
    .align-items-#{$alignment}-touch
      align-items: $alignment
    .align-self-#{$alignment}-touch
      align-self: $alignment
  +desktop
    .align-items-#{$alignment}-desktop
      align-items: $alignment 
    .align-self-#{$alignment}-desktop
      align-self: $alignment 
  +widescreen
    .align-items-#{$alignment}-widescreen
      align-items: $alignment 
    .align-self-#{$alignment}-widescreen
      align-self: $alignment 
  +fullhd
    .align-items-#{$alignment}-fullhd
      align-items: $alignment 
    .align-self-#{$alignment}-fullhd
      align-self: $alignment 

      
@each $alignment in $flex-justify-content-alignments
  .justify-content-#{$alignment}
    justify-content: $alignment 
  .align-content-#{$alignment}
    align-content: $alignment 
  +mobile
    .justify-content-#{$alignment}-mobile
      justify-content: $alignment 
    .align-content-#{$alignment}-mobile
      align-content: $alignment
  +tablet
    .justify-content-#{$alignment}-tablet
      justify-content: $alignment
    .align-content-#{$alignment}-tablet
      align-content: $alignment
  +touch
    .justify-content-#{$alignment}-touch
      justify-content: $alignment
    .align-content-#{$alignment}-touch
      align-content: $alignment
  +desktop
    .justify-content-#{$alignment}-desktop
      justify-content: $alignment
    .align-content-#{$alignment}-desktop
      align-content: $alignment
  +widescreen
    .justify-content-#{$alignment}-widescreen
      justify-content: $alignment
    .align-content-#{$alignment}-widescreen
      align-content: $alignment
  +fullhd
    .justify-content-#{$alignment}-fullhd
      justify-content: $alignment
    .align-content-#{$alignment}-fullhd
      align-content: $alignment

