@import './mixins';

.flex {
  @include flexible;
}

.flex-none {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flex-item {
  flex: 1 0 0%;
  @include flexible;
}

.flex-items-top {
  @include flexible;
  align-items: flex-start;
}

.flex-items-middle {
  @include flexible;
  align-items: center;
}

.flex-items-bottom {
  @include flexible;
  align-items: flex-end;
}

.flex-top {
  @include flexible;
  align-self: flex-start;
}

.flex-center {
  @include flexible;
  align-self: center;
}

.flex-bottom {
  @include flexible;
  align-self: flex-end;
}

.flex-items-left {
  @include flexible;
  justify-content: flex-start;
}

.flex-items-center {
  @include flexible;
  justify-content: center;
}

.flex-items-right {
  @include flexible;
  justify-content: flex-end;
}

.flex-items-around {
  @include flexible;
  justify-content: space-around;
}

.flex-items-between {
  @include flexible;
  justify-content: space-between;
}

.flex-col {
  @include flexible;
  flex-direction: column;
}

.flex-row {
  @include flexible;
  flex-direction: row;
}

.flex-repair {
  min-height: 10px; // @link: http://www.jianshu.com/p/de06328eaa44
}

/**
 *
 * .flex-1, .flex-2, .flex-3, .flex-4, .flex-5.
 * .flex-col-1, .flex-col-2, .flex-col-3, .flex-col-4, .flex-col-5.
 * .flex-row-1, .flex-row-2, .flex-row-3, .flex-row-4, .flex-row-5.
 *
 */
@for $index from 1 through 10 {
  .flex-#{$index} {
    @include flexible;
    flex: $index 0 0%;
  }

  .flex-row-#{$index} {
    @include flexible;
    flex-direction: row;
    flex: $index 0 0%;
  }

  .flex-col-#{$index} {
    @include flexible;
    flex-direction: column;
    flex: $index 0 0%;
  }
}
