// FLEX
.flex {
  display: flex;

  // FLOWS
  &.col, &.column {
    flex-flow: column;
  }

  &.wrap {
    flex-flow: wrap;
  }

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

  &.nowrap, &.no-wrap {
    flex-flow: nowrap;
  }

  &.row {
    flex-flow: row;
  }

  &.row-reverse {
    flex-flow: row-reverse;
  }

  // GROW/SHRINK
  .grow-h, .grow-horizontal {
    flex-grow: 1;
    width: 1%;
  }

  .grow-v, .grow-vertical {
    flex-grow: 1;
    height: 1%;
  }

  .fixed-size {
    flex: 0 0 auto;
  }

  // JUSTIFY
  &.start {
    justify-content: flex-start;
  }

  &.center {
    justify-content: center;
  }

  &.end {
    justify-content: flex-end;
  }

  &.space-around {
    justify-content: space-around;
  }

  &.space-evenly {
    justify-content: space-evenly;
  }

  &.space-between {
    justify-content: space-between;
  }

  // ALIGN
  &.align-center {
    align-items: center;
  }

  &.align-base {
    align-items: baseline;
  }

  &.align-end {
    align-items: end;
  }

  // GAPS
  @mixin column-gap-x {
    @for $i from 1 through 14 {
      &.column-gap-#{$i} {
        column-gap: #{$i}px;
      }
    }
  }

  @include column-gap-x;

  @mixin row-gap-x {
    @for $i from 1 through 14 {
      &.row-gap-#{$i} {
        row-gap: #{$i}px;
      }
    }
  }

  @include row-gap-x;

}