.flex-row {
  display: flex !important;
}

.flex-column {
  flex: 1;
}

.flex-vertical {
  flex-direction: column;
}

// provides helper sizes 1-12 for flex-columns, e.g. flex-size--3
.generate-flex-sizes(12);

.generate-flex-sizes(@n, @size: 0) when (@size =< @n) {
  .flex-size--@{size} {
    flex-grow: @size;
    flex-shrink: @size;
    flex-basis: auto; //needed by IE (10 & 11)
  }
  .generate-flex-sizes(@n, (@size + 1));
}

.flex-align-self--center {
  align-self: center;
}

.flex-align--center {
  align-items: center;
}

.flex-align--bottom {
  align-items: baseline;
}

.flex-align--right {
  justify-content: flex-end;
}

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

.flex-basis(@size) {
  flex-basis: @size;
}

.flex-grow(@number) {
  flex-grow: @number;
  -ms-flex-positive: @number;
}