Suitcss Flex utilities

flex-utils.css

/**
 * Note: `min-height` flex container won't apply to its flex items in IE 10-11
 * More info: http://git.io/NbmO
 * Can be targeted with selector hack: http://git.io/Nbqx
 */

.u-flex {
  display: flex;
}

/**
 * Companion classes for `.u-flex`
 */

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

.u-flexColumn {
  flex-direction: column;
}

.u-flexAlignCenter {
  align-items: center;
}

.u-flexAlignEnd {
  align-items: flex-end;
}

.u-flexJustifyCenter {
  justify-content: center;
}

/**
 * Descendants
 *
 * 1. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
 *    letting these items shrink to smaller than their content's default
 *    minimum size.
 * 2. Do not use unitless flex-basis values in the flex shorthand because
 *    IE 10-11 will error
 * 3. Fix potential overflow issue in IE 10-11
 */

.u-flex > * {
  flex-shrink: 0; /* 1 */
  max-width: 100%; /* 3 */
  box-sizing: border-box; /* 3 */
}

.u-flexGrow {
  flex: 1 0 auto; /* 2 */
}