Flex Container

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

• 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