// # Flexbox
// Flexbox support is full on Chrome, Firefox and Safari (with prefix) and nearly full for IE 10.
//
// - With IE10 at least one of the flex children needs to have a width or flex value otherwise the content in those children will not wrap. However, if none of children will collide, no width or flex value is needed.
//
// `flex-grow` is not supported by IE10, `justify-content` is the next best thing.
//
// Use in Sass with:
//
//[c]
//     .foo {
//          @include display(flex);
//          @include flex(1);
//     }
//[/c]
//
// or the corresponding classes directly in the HTML.
//
//[c]
//     <div class="flex flex-1">item</div>
//[/c]


// ## Flex classes

.flex {
  @include display(flex);
}

.flex-1 {
  @include flex(1);
}

.flex-none {
  @include flex(none);
}

.flex-wrap--wrap {
  @include flex-wrap(wrap);
}

.flex-wrap--nowrap {
  @include flex-wrap(nowrap);
}

.flex-direction--column {
  @include flex-direction(column)
}

.justify-content--space-between {
  @include justify-content(space-between);
}

.justify-content--center {
  @include justify-content(center);
}

.justify-content--flex-start {
  @include justify-content(flex-start);
}

.justify-content--flex-end {
  @include justify-content(flex-end);
}

.align-items--center {
  @include align-items(center)
}

.align-items--flex-start {
  @include align-items(flex-start)
}

.align-items--flex-end {
  @include align-items(flex-end)
}