/* Grid
  1. Flex Default value to ensure it work well
  2. Grid can be use stanalone with any component
 ========================================================================== */
.flex {
  /*1*/
  .display(flex);
  .flex-wrap(wrap);
  /*2*/
  list-style: none;
  margin: 0;
  padding: 0;

  &:extend(.clearfix);
}

.flex-inline {
  .display(inline-flex);
}

.flex-column {
  .flex-direction(column);
}

/*
 * Fixes initial flex-shrink value in IE10
 */
.flex > *,
.flex-inline > * {
  -ms-flex-negative: 1;
}

/* Alignment
 ========================================================================== */
/*
 * Vertical alignment
 * Default value is `stretch`
 */

.flex-top {
  .align-items(flex-start);
}

.flex-middle {
  .align-items(center);
}

.flex-bottom {
  .align-items(flex-end);
}

/*
 * Horizontal alignment
 * Default value is `flex-start`
 */

.flex-center {
  .justify-content(center);
}

.flex-right {
  .justify-content(flex-end);
}

.flex-space-between {
  .justify-content(space-between);
}

.flex-space-around {
  .justify-content(space-around);
}