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

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

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 Class
Value
-flex-basis--autoflex-basis: auto;
-flex-basis--*can be incremented by 5%

Target specific breakpoints

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

Flex-basis Class
Value
-flex-basis-sm--autoVisible 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--*Visible only from md, can be incremented by 5%
-flex-basis-lg--autoVisible 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--*Visible only from xl, can be incremented by 5%

Examples

-flex-basis--25
-flex-basis--50
-flex-basis-md--75
-flex-basis-xl--50
<!-- flex-basis 25% on all breakpoints -->
<div class="-d--flex">
  <div class="-flex-basis--25"></div>
</div>
<!-- flex-basis 50% on all breakpoints -->
<div class="-d--flex">
  <div class="-flex-basis--50"></div>
</div>
<!-- flex-basis 75% from md -->
<div class="-d--flex">
  <div class="-flex-basis-md--75"></div>
</div>
<!-- flex-basis 50% from xl -->
<div class="-d--flex">
  <div class="-flex-basis-xl--50"></div>
</div>