"Has Columns" Flexbox SCSS Mixin

has_columns.scss

// Sets up a element and its child elements with the flexbox properties needed
// to have the given number of columns with optional gutters or margins.
$mobile-breakpoint: 500px !default;

@mixin has-columns($columns, $gutter: 0, $margin: 0) {
  @include align-content(stretch);
  @include align-items(stretch);
  @include display(flex);
  @include flex-direction(row);
  @include flex-wrap(wrap);
  @include justify-content(space-around);
  margin: 0 auto;

  // Gutter and margin should be used for two different purposes.
  @if $margin > 0 and $gutter > 0 {
    @error "$gutter and $margin cannot be used together. Given: $gutter: #{$gutter} $margin: #{$margin}";
  }

  @if $margin > 0 {
    padding: $margin 0 0 $margin;
  }

  > div {
    @include flex(1 1 auto);
    width: (1 / $columns) * 85%;

    @if $margin > 0 {
      margin: 0 $margin $margin 0;
    } @else if $gutter > 0 {
      margin-right: $gutter;

      &:nth-child(#{$columns}n) {
        margin-right: 0;
      }
    }

    &:empty {
      margin-bottom: 0;
      margin-top: 0;
      visibility: hidden;
    }
  }

  @media (max-width: $mobile-breakpoint) {
    > div {
      width: 100%;

      @if $gutter > 0 {
        margin-bottom: $gutter;
        margin-right: 0;
      }
    }
  }
}

usage.scss

body.pages.home {
  .columns {
    @include has-columns(3, $gutter: 1em);
  }

  .widgets {
    @include has-columns(3, $margin: 1em);
  }

  .center-children {
    @include center-children;
  }
}