Chi Documentation

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
<div class="-d--flex"></div>

Inline Flexbox container

-d--inline-flex
<div class="-d--inline-flex"></div>

Target specific breakpoints with Display reponsive 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
<div class="-d--flex -flex--row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Row reverse

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

Item 1
Item 2
Item 3
<div class="-d--flex -flex--row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Column

Use .-flex--column to display items vertically.

Item 1
Item 2
Item 3
<div class="-d--flex -flex--column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Column reverse

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

Item 1
Item 2
Item 3
<div class="-d--flex -flex--column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Target specific breakpoints with Direction reponsive 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
<div class="-d--flex -justify-content--start"></div>
<div class="-d--flex -justify-content--end"></div>
<div class="-d--flex -justify-content--center"></div>
<div class="-d--flex -justify-content--between"></div>
<div class="-d--flex -justify-content--around"></div>

Target specific breakpoints with Justify content reponsive 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
<div class="-d--flex -align-items--start"></div>
<div class="-d--flex -align-items--end"></div>
<div class="-d--flex -align-items--center"></div>
<div class="-d--flex -align-items--baseline"></div>
<div class="-d--flex -align-items--stretch"></div>

Target specific breakpoints with Align items reponsive 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
<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--start">Aligned Item</div>
  <div>Item</div>
</div>

End

Item
Aligned Item
Item
<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--end">Aligned Item</div>
  <div>Item</div>
</div>

Center

Item
Aligned Item
Item
<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--center">Aligned Item</div>
  <div>Item</div>
</div>

Baseline

Item
Aligned Item
Item
<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--baseline">Aligned Item</div>
  <div>Item</div>
</div>

Stretch (Browser default)

Item
Aligned Item
Item
<div class="-d--flex">
  <div>Item</div>
  <div class="-align-self--stretch">Aligned Item</div>
  <div>Item</div>
</div>

Target specific breakpoints with Align self reponsive 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
<div class="-d--flex -align-items--start -flex--nowrap" style="height:116px;width:224px;">
  <div>Item</div>
</div>

Wrap

Item
Item
Item
Item
<div class="-d--flex -align-items--start -flex--wrap" style="width:224px;">
  <div>Item</div>
</div>

Wrap Reverse

Item
Item
Item
Item
<div class="-d--flex -align-items--start -flex--wrap-reverse" style="width:224px;">
  <div>Item</div>
</div>

Target specific breakpoints with Wrap reponsive 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
<div class="-d--flex -align-content--start -flex--wrap">
  <div>Item</div>
</div>

End

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="-d--flex -align-content--end -flex--wrap">
  <div>Item</div>
</div>

Center

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="-d--flex -align-content--center -flex--wrap">
  <div>Item</div>
</div>

Around

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="-d--flex -align-content--around -flex--wrap">
  <div>Item</div>
</div>

Between

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="-d--flex -align-content--between -flex--wrap">
  <div>Item</div>
</div>

Stretch

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="-d--flex -align-content--stretch -flex--wrap">
  <div>Item</div>
</div>

Target specific breakpoints with Align content reponsive 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
<div class="-d--flex">
  <div class="-flex--fill">Item</div>
  <div class="-flex--fill">Item</div>
  <div class="-flex--fill">Item</div>
</div>

Target specific breakpoints with Fill reponsive 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
<div class="-d--flex">
  <div class="-flex--grow1">Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Target specific breakpoints with Fill reponsive 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
<div class="-d--flex">
  <div style="width:100%;">Item</div>
  <div class="-flex--shrink1">Shrink Item</div>
</div>

Target specific breakpoints with Shrink reponsive 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