@superflycss/utilities-layout/flex/flex.css

Layout utilities

/** @define utilities */

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

.u-flex-bullseye {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

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

.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@for $factor from 1 to 10 {
  .u-flex-grow$(factor) {
    flex: $(factor) 1 0% !important;
  }
}

@for $factor from 0 to 10 {
  .u-flex-shrink$(factor) {
    flex-shrink: $(factor) !important;
  }
}

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

.u-flex-expand-left {
  margin-left: auto !important;
}

.u-flex-expand-right {
  margin-right: auto !important;
}

.u-flex-expand-top {
  margin-top: auto !important;
}

.u-flex-expand-bottom {
  margin-bottom: auto !important;
}

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

.u-flex-basis0 {
  flex-basis: 0 !important;
}


/*
   * Shorthand
   *
   * Declares all values instead of keywords like 'initial' to work around IE10
   * https://www.w3.org/TR/css-flexbox-1/#flex-common
   *
   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
   *    This ensures it overrides flex-basis set in other utilities.
   */


/*
   * Sizes the item based on the width/height properties
   */

.u-flex-initial {
  flex: 0 1 auto !important;
  flex-basis: auto !important;
  /* 1 */
}


/*
   * Sizes the item based on the width/height properties, but makes them fully
   * flexible, so that they absorb any free space along the main axis.
   */

.u-flex-auto {
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  /* 1 */
}


/*
   * Sizes the item according to the width/height properties, but makes the flex
   * item fully inflexible. Similar to initial, except that flex items are
   * not allowed to shrink, even in overflow situations.
   */

.u-flex-none {
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  /* 1 */
}