.flex {
  display: flex;
  @extend .column;
}

.column {
  flex-direction: column;
}

.row {
  @extend .flex;
  flex-direction: row;
}

.aCenter {
  @extend .flex;
  align-items: center;
}

.wrap{
  @extend .flex;
  flex-wrap: wrap;
}


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

.jCenter {
  @extend .flex;
  justify-content: center;
}

.center {
  @extend .flex,.aCenter,.jCenter;
}

@for $index from 1 through 6 {
  .flex-#{$index}-auto{
    @extend .flex;
    flex: $index;
  }
  .flex-#{$index} {
    @extend .flex,.overflow;
    flex: $index;
  }

}

.rowWrap{
  @extend .wrap,.row;
}

.rowACenter{
  @extend .aCenter,.row;
}

.rowCenter{
  @extend .center,.row;
}

.rowJCenter{
  @extend .jCenter,.row;
}
