Flex System

Use the grid system to build responsive layouts

All classes below are breakpoint targetable

Flex Container

.flex__container
This is a flex container set to wrap by default.

Flex Container Classes

  • .flex__container--large-column-gap
    3rem column-gap.
  • .flex__container--large-row-gap
    3rem row-gap.
  • .flex__container--medium-column-gap
    2rem column-gap.
  • .flex__container--medium-row-gap
    2rem row-gap.
  • .flex__container--small-column-gap
    1rem column-gap.
  • .flex__container--small-row-gap
    1rem row-gap.
  • .flex__container--no-wrap
    Disables flex wrap.
  • .flex__container--row-reversed
    Reverses the row order
  • .flex__container--row-normal
    Resets the row order
  • .flex__container--column-reversed
    Reverses the column order
  • .flex__container--column-normal
    Resets the column order
  • .flex__container--wrap-reserve
    Reverses the wrap order
  • .flex__container--column
    Changes flex direction to column from default of row.
  • Align Content
    • .flex__container--a-c-start
    • .flex__container--a-c-end
    • .flex__container--a-c-space-between
    • .flex__container--a-c-space-around
  • Align Items
    • .flex__container--a-i-start
    • .flex__container--a-i-end
    • .flex__container--a-i-center
    • .flex__container--a-i-baseline
  • Justify Content
    • .flex__container--j-c-end
    • .flex__container--j-c-center
    • .flex__container--j-c-space-between
    • .flex__container--j-c-space-around
  • Justify Items
    • .flex__container--j-i-stretch
    • .flex__container--j-i-center
    • .flex__container--j-i-start
    • .flex__container--j-i-end
  • Defined Columns
    • .flex__container--1-up
    • .flex__container--2-up
    • .flex__container--3-up
    • .flex__container--4-up
    These classes will set the flex-basis of the children to occupy the space specified. Gap values are accounted for if using the .flex__container--large-column-gap class, or otherwise defining the css variable --flex-container-column-gap in the correct context.

Flex Items

.flex__item
This class is required for flex-basis targeting for defined columns.
  • Align Self
    • .flex__item-a-start
    • .flex__item-a-end
    • .flex__item-a-center
    • .flex__item-a-baseline
    • .flex__item-a-stretch
  • Justify Self
    • .flex__item-j-stretch
    • .flex__item-j-center
    • .flex__item-j-start
    • .flex__item-j-end