/* ==========================================================================
   #FLEXBOX UTILITY
   ========================================================================== */

/**
 * In the flex layout model, the children of a flex container can be laid out
 * in any direction, and can “flex” their sizes, either growing to fill unused
 * space or shrinking to avoid overflowing the parent. Both horizontal and
 * vertical alignment of the children can be easily manipulated.
 *
 * Flexbox spec: https://www.w3.org/TR/css-flexbox/
 */

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

.u-flex-inline {
  display: inline-flex !important;
}


/**
 * This is the DEFAULT value. It sizes the item based on its width/height
 * properties (or its content if not set). It makes the flex item inflexible
 * when there is some free space left, but allows it to shrink to its minimum
 * when there is not enough space.
 *
 * This is equivalent to setting "flex: 0 1 auto".
 */

.u-flex-initial {
  flex: initial !important;
}


/**
 * The item is given the specified proportion (1) of the free space in the
 * container. If all items in the flex container use this pattern, their sizes
 * will be proportional to the specified flex factor.
 *
 * This is equivalent to setting "flex: 1 1 0px".
 */

.u-flex-1 {
  flex: 1 !important;
}


/**
 * Beware, this is not the default value. The item is sized according to its
 * width and height properties, but grows to absorb any extra free space in the
 * flex container, and shrinks to its minimum size to fit the container.
 *
 * This is equivalent to setting "flex: 1 1 auto".
 */

.u-flex-auto {
  flex: auto !important;
}


/**
 * The item is sized according to its width and height properties. It is fully
 * inflexible: it neither shrinks nor grows in relation to the flex container.
 *
 * This is equivalent to setting "flex: 0 0 auto".
 */

.u-flex-none {
  flex: none !important;
}





/* Direction.
   ========================================================================== */


.u-flex-row {
  flex-direction: row !important;
}

.u-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.u-flex-column {
  flex-direction: column !important;
}

.u-flex-column-reverse {
  flex-direction: column-reverse !important;
}





/* Vertical and horizontal centering.
   ========================================================================== */


.u-flex-no-wrap {
  flex-wrap: nowrap !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}





/* Vertical and horizontal centering.
   ========================================================================== */


/**
 * It makes sense to create a full-centerer utility class since it's so
 * commonly used.
 *
 * 1. Align items in Main Axis
 * 2. Align items in Cross Axis
 */

.u-flex-center {
  align-items: center !important; /* [1] */
  justify-content: center !important; /* [2] */
}





/* Positioning a single element along a container's cross axis.
   ========================================================================== */


.u-flex-self-auto {
  align-self: auto !important;
}

.u-flex-self-start {
  align-self: flex-start !important;
}

.u-flex-self-center {
  align-self: center !important;
}

.u-flex-self-end {
  align-self: flex-end !important;
}

.u-flex-self-stretch {
  align-self: stretch !important;
}

.u-flex-self-baseline {
  align-self: baseline !important;
}





/* Positioning flex items along a container's cross axis.
   ========================================================================== */


.u-flex-items-stretch {
  align-items: stretch !important;
}

.u-flex-items-start {
  align-items: flex-start !important;
}

.u-flex-items-center {
  align-items: center !important;
}

.u-flex-items-end {
  align-items: flex-end !important;
}

.u-flex-items-baseline {
  align-items: baseline !important;
}





/* Positioning flex items along a container's main axis.
   ========================================================================== */


.u-flex-justify-start {
  justify-content: flex-start !important;
}

.u-flex-justify-center {
  justify-content: center !important;
}

.u-flex-justify-end {
  justify-content: flex-end !important;
}

.u-flex-justify-between {
  justify-content: space-between !important;
}

.u-flex-justify-around {
  justify-content: space-around !important;
}

.u-flex-justify-evenly {
  justify-content: space-evenly !important;
}