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

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

Inline Flexbox container

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

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

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

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

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

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

<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

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

End

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

Center

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

Baseline

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

Stretch (Browser default)

<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)

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

Wrap

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

Wrap Reverse

<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)

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

End

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

Center

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

Around

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

Between

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

Stretch

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

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

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

<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