@mixin flex-item($item) {
  .flex#{$item} {
    flex: $item;
  }
}

.flex {
  display: flex;

  &.flex-direction-column {
    flex-direction: column;

    .main {
      flex: 1;
    }
  }

  &-control-label {
    width: 300px;
    float: left;
  }
  &-controls {
    flex: 1;
  }

  @for $i from 0 through 23 {
    @include flex-item($i);
  }

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

}