_flex-grid.scss

$grid-gutter-width: 1em !default;
$bp: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
) !default;

.flex-grid {
  display: flex;
  margin: (-$grid-gutter-width / 2);

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

  &--direction {
    &-row {
      flex-direction: row;

      &-reverse {
        flex-direction: row-reverse;
      }
    }

    &-column {
      flex-direction: column;

      &-reverse {
        flex-direction: column-reverse;
      }
    }
  }

  &--justify {
    &-flex-start {
      justify-content: flex-start;
    }

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

    &-center {
      justify-content: center;
    }

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

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

  &--align {
    &-flex-start {
      align-items: flex-start;
    }

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

    &-center {
      align-items: center;
    }

    &-baseline {
      align-items: baseline;
    }

    &-stretch {
      align-items: stretch;
    }
  }

  &__item {
    flex: 0 0 auto;
    min-width: 0; // Fixes a bug not letting the child shrink the content
    padding: $grid-gutter-width / 2;

    &--grow {
      flex-grow: 1;
    }

    &--shrink {
      flex-shrink: 1;
    }

    &--flex {
      display: flex;
    }

    &--align {
      &-flex-start {
        align-self: flex-start;
      }

      &-flex-end {
        align-self: flex-end;
      }

      &-center {
        align-self: center;
      }

      &-baseline {
        align-self: baseline;
      }

      &-stretch {
        align-self: stretch;
      }
    }

    @each $bp-key, $bp-value in $bp {
      @media screen and (min-width: $bp-value) {
        @for $i from 1 through 12 {
          &--#{$bp-key}-#{$i} {
            width: percentage($i / 12);
          }
        }
      }
    }
  }
}