Flex

Use shorthand flex utility classes to manage the layout, alignment, and size of Chi components.

Display #

To enable flex, apply a flex display utility class. This will transform your element into a flexbox container and its direct children into flex items.

Flexbox container #

-d--flex

Inline Flexbox container #

-d--inline-flex

Target specific breakpoints with Display responsive classes.

  • -d--flex
  • -d--inline-flex
  • -d-sm--flex
  • -d-sm--inline-flex
  • -d-md--flex
  • -d-md--inline-flex
  • -d-lg--flex
  • -d-lg--inline-flex
  • -d-xl--flex
  • -d-xl--inline-flex

Direction #

Use direction utilities to define how items will be placed in flex containers.

Row (default) #

Use -flex--row to display items horizontally. In most cases this class can be omitted as it is the browsers default behavior.

Item 1
Item 2
Item 3

Row reverse #

Use -flex--row-reverse to display the items horizontally in reverse.

Item 1
Item 2
Item 3

Column #

Use -flex--column to display items vertically.

Item 1
Item 2
Item 3

Column reverse #

Use -flex--column-reverse to display the items vertically in reverse.

Item 1
Item 2
Item 3

Target specific breakpoints with Direction responsive classes.

  • -flex--row
  • -flex--row-reverse
  • -flex--column
  • -flex--column-reverse
  • -flex-sm--row
  • -flex-sm--row-reverse
  • -flex-sm--column
  • -flex-sm--column-reverse
  • -flex-md--row
  • -flex-md--row-reverse
  • -flex-md--column
  • -flex-md--column-reverse
  • -flex-lg--row
  • -flex-lg--row-reverse
  • -flex-lg--column
  • -flex-lg--column-reverse
  • -flex-xl--row
  • -flex-xl--row-reverse
  • -flex-xl--column
  • -flex-xl--column-reverse

Justify content #

Use justify-content utilities to alter the alignment of flex items on the main axis.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Target specific breakpoints with Justify content responsive classes.

  • -justify-content--start
  • -justify-content--end
  • -justify-content--center
  • -justify-content--between
  • -justify-content--around
  • -justify-content-sm--start
  • -justify-content-sm--end
  • -justify-content-sm--center
  • -justify-content-sm--between
  • -justify-content-sm--around
  • -justify-content-md--start
  • -justify-content-md--end
  • -justify-content-md--center
  • -justify-content-md--between
  • -justify-content-md--around
  • -justify-content-lg--start
  • -justify-content-lg--end
  • -justify-content-lg--center
  • -justify-content-lg--between
  • -justify-content-lg--around
  • -justify-content-xl--start
  • -justify-content-xl--end
  • -justify-content-xl--center
  • -justify-content-xl--between
  • -justify-content-xl--around

Align Items #

Use align-items utilities to alter the alignment of flex items on the cross axis.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Target specific breakpoints with Align items responsive classes.

  • -align-items--start
  • -align-items--end
  • -align-items--center
  • -align-items--baseline
  • -align-items--stretch
  • -align-items-sm--start
  • -align-items-sm--end
  • -align-items-sm--center
  • -align-items-sm--baseline
  • -align-items-sm--stretch
  • -align-items-md--start
  • -align-items-md--end
  • -align-items-md--center
  • -align-items-md--baseline
  • -align-items-md--stretch
  • -align-items-lg--start
  • -align-items-lg--end
  • -align-items-lg--center
  • -align-items-lg--baseline
  • -align-items-lg--stretch
  • -align-items-xl--start
  • -align-items-xl--end
  • -align-items-xl--center
  • -align-items-xl--baseline
  • -align-items-xl--stretch

Align self #

Use align-self utilities to alter the alignment of individual flex items on the cross axis.

Start #

Item
Aligned Item
Item

End #

Item
Aligned Item
Item

Center #

Item
Aligned Item
Item

Baseline #

Item
Aligned Item
Item

Stretch (Browser default) #

Item
Aligned Item
Item

Target specific breakpoints with Align self responsive classes.

  • -align-self--start
  • -align-self--end
  • -align-self--center
  • -align-self--baseline
  • -align-self--stretch
  • -align-self-sm--start
  • -align-self-sm--end
  • -align-self-sm--center
  • -align-self-sm--baseline
  • -align-self-sm--stretch
  • -align-self-md--start
  • -align-self-md--end
  • -align-self-md--center
  • -align-self-md--baseline
  • -align-self-md--stretch
  • -align-self-lg--start
  • -align-self-lg--end
  • -align-self-lg--center
  • -align-self-lg--baseline
  • -align-self-lg--stretch
  • -align-self-xl--start
  • -align-self-xl--end
  • -align-self-xl--center
  • -align-self-xl--baseline
  • -align-self-xl--stretch

Wrap #

Use wrap utilities to define how flex items wrap in a flex container.

No Wrap (default) #

Item
Item
Item
Item

Wrap #

Item
Item
Item
Item

Wrap Reverse #

Item
Item
Item
Item

Target specific breakpoints with Wrap responsive classes.

  • -flex--nowrap
  • -flex--wrap
  • -flex--wrap-reverse
  • -flex-sm--nowrap
  • -flex-sm--wrap
  • -flex-sm--wrap-reverse
  • -flex-md--nowrap
  • -flex-md--wrap
  • -flex-md--wrap-reverse
  • -flex-lg--nowrap
  • -flex-lg--wrap
  • -flex-lg--wrap-reverse
  • -flex-xl--nowrap
  • -flex-xl--wrap
  • -flex-xl--wrap-reverse

Align content #

Use align-content utilities on flexbox containers to alter the alignment of flex items together on the cross axis.

Start (default) #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

End #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Center #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Around #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Between #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Stretch #

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Target specific breakpoints with Align content responsive classes.

  • -align-content--start
  • -align-content--end
  • -align-content--center
  • -align-content--around
  • -align-content--between
  • -align-content--stretch
  • -align-content-sm--start
  • -align-content-sm--end
  • -align-content-sm--center
  • -align-content-sm--around
  • -align-content-sm--between
  • -align-content-sm--stretch
  • -align-content-md--start
  • -align-content-md--end
  • -align-content-md--center
  • -align-content-md--around
  • -align-content-md--between
  • -align-content-md--stretch
  • -align-content-lg--start
  • -align-content-lg--end
  • -align-content-lg--center
  • -align-content-lg--around
  • -align-content-lg--between
  • -align-content-lg--stretch
  • -align-content-xl--start
  • -align-content-xl--end
  • -align-content-xl--center
  • -align-content-xl--around
  • -align-content-xl--between
  • -align-content-xl--stretch

Fill #

Use the -flex--fill class on flexbox items to display as equal widths while taking up all available horizontal space.

Item
Item
Item

Target specific breakpoints with Fill responsive classes.

  • -flex--fill
  • -flex-sm--fill
  • -flex-md--fill
  • -flex-lg--fill
  • -flex-xl--fill

Grow #

Use the -flex--grow* class to toggle a flex item's ability to grow and take up all available space.

Item
Item
Item

Target specific breakpoints with Fill responsive classes.

  • -flex--grow0
  • -flex--grow1
  • -flex-sm--grow0
  • -flex-sm--grow1
  • -flex-md--grow0
  • -flex-md--grow1
  • -flex-lg--grow0
  • -flex-lg--grow1
  • -flex-xl--grow0
  • -flex-xl--grow1

Shrink #

Use the -flex--shrink* class to toggle a flex item's ability to shrink when its size is larger than its container.

Item
Shrink Item

Target specific breakpoints with Shrink responsive classes.

  • -flex--shrink0
  • -flex--shrink1
  • -flex-sm--shrink0
  • -flex-sm--shrink1
  • -flex-md--shrink0
  • -flex-md--shrink1
  • -flex-lg--shrink0
  • -flex-lg--shrink1
  • -flex-xl--shrink0
  • -flex-xl--shrink1

Basis #

Use the -flex--basis* class to specify the initial size of the flex item, before any available space is distributed according to the flex factors.

Flex-basis utility classes can be defined using the format -flex-basis-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints #

Flex-basis utility classes with no breakpoint defined apply to all screen sizes.

Flex-basis ClassValue
-flex-basis--autoflex-basis: auto;
-flex-basis--0flex-basis: 0;
-flex-basis--*can be incremented by 5%

Target specific breakpoints #

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Flex-basis ClassValue
-flex-basis-sm--autoVisible only from sm
-flex-basis-sm--0Visible only from sm
-flex-basis-sm--*Visible only from sm, can be incremented by 5%
-flex-basis-md--autoVisible only from md
-flex-basis-md--0Visible only from md
-flex-basis-md--*Visible only from md, can be incremented by 5%
-flex-basis-lg--autoVisible only from lg
-flex-basis-lg--0Visible only from lg
-flex-basis-lg--*Visible only from lg, can be incremented by 5%
-flex-basis-xl--autoVisible only from xl
-flex-basis-xl--0Visible only from xl
-flex-basis-xl--*Visible only from xl, can be incremented by 5%

Examples #

-flex-basis--25
-flex-basis--50
-flex-basis-md--75
-flex-basis-xl--50