Utilities - Flex

Use flexbox utilities to modify the layout, alignment, and sizing of components and more.

Flex Behavior

Apply display: flex using CSS or the _display:flex helper to create a flexbox container and transform direct children elements into flex items.

I'm a flexbox container
<div class="_display:flex">I'm a flexbox container</div>

I'm an inline flexbox container
<div class="_display:inline-flex">I'm an inline flexbox container</div>

Flexbox utilities can also be applied responsively. Here are the available helper classes::

  • ._display:flex
  • ._display:inline-flex
  • ._{xs|sm|md|lg|xl|xxl}:display:flex
  • ._{xs|sm|md|lg|xl|xxl}:display:inline-flex

Flex Direction

Set the direction of flex items in a flex container with direction utilities. The browser default is flex-direction: row, therefore the row helper won’t be always necessary. However, when targeting various screen sizes, you may encounter situations where you needed to explicitly set this value.

Row Direction

Setting a row direction will cause the flexbox items to flow horizontally.

Flex Item 1
Flex Item 2
Flex Item 1
Flex Item 2
<div class="_display:flex _flex-direction:row">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

<div class="_display:flex _flex-direction:row-reverse">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

Column Direction

Setting a column direction will cause the flexbox items to flow vertically.

Flex Item 1
Flex Item 2
Flex Item 1
Flex Item 2
<div class="_display:flex _flex-direction:column">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

<div class="_display:flex _flex-direction:column-reverse">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
</div>

Flexbox direction utilities can also be applied responsively. Here are the available helper classes::

  • ._flex-direction:row
  • ._flex-direction:row-reverse
  • ._flex-direction:column
  • ._flex-direction:column-reverse
  • ._{xs|sm|md|lg|xl|xxl}:flex-direction:row
  • ._{xs|sm|md|lg|xl|xxl}:flex-direction:row-reverse
  • ._{xs|sm|md|lg|xl|xxl}:flex-direction:column
  • ._{xs|sm|md|lg|xl|xxl}:flex-direction:column-reverse

Justify Content

Use _justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis if flex-direction: row, y-axis if flex-direction: column).

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
<div class="_display:flex _justify-content:start">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _justify-content:center">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _justify-content:end">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _justify-content:space-between">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _justify-content:space-around">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

Flexbox justify content utilities can also be applied responsively. Here are the available helper classes::

  • ._justify-content:start or ._justify-content:flex-start
  • ._justify-content:end or ._justify-content:flex-end
  • ._justify-content:center
  • ._justify-content:space-between
  • ._justify-content:space-around
  • ._{xs|sm|md|lg|xl|xxl}:justify-content:start
  • ._{xs|sm|md|lg|xl|xxl}:justify-content:end
  • ._{xs|sm|md|lg|xl|xxl}:justify-content:center
  • ._{xs|sm|md|lg|xl|xxl}:justify-content:space-between
  • ._{xs|sm|md|lg|xl|xxl}:justify-content:space-around

Align Items

Use _align-items utilities on flexbox containers to change the alignment of flex items on the secondary axis (the y-axis if flex-direction: row, x-axis if flex-direction: column).

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
<div class="_display:flex _align-items:start">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _align-items:center">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _align-items:end">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _align-items:baseline">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

<div class="_display:flex _align-items:stretch">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
</div>

Note: The wrappers of the items above have a fixed height.

Flexbox align items utilities can also be applied responsively. Here are the available helper classes::

  • ._align-items:start or ._align-items:flex-start
  • ._align-items:end or ._align-items:flex-end
  • ._align-items:center
  • ._align-items:baseline
  • ._align-items:stretch
  • ._align-items-{xs|sm|md|lg|xl|xxl}-start
  • ._align-items-{xs|sm|md|lg|xl|xxl}-end
  • ._align-items-{xs|sm|md|lg|xl|xxl}-center
  • ._align-items-{xs|sm|md|lg|xl|xxl}-baseline
  • ._align-items-{xs|sm|md|lg|xl|xxl}-stretch

Align Self

Use _align-self utilities on a flexbox item to change the alignment of the item on the secondary axis (the y-axis if flex-direction: row, x-axis if flex-direction: column).

Flex Item
Aligned Flex Item
Flex Item
Flex Item
Aligned Flex Item
Flex Item
Flex Item
Aligned Flex Item
Flex Item
Flex Item
Aligned Flex Item
Flex Item
Flex Item
Aligned Flex Item
Flex Item
<div class="_display:flex">
    <div>Flex Item</div>
    <div class="_align-self:start">Aligned Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex">
    <div>Flex Item</div>
    <div class="_align-self:center">Aligned Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex">
    <div>Flex Item</div>
    <div class="_align-self:end">Aligned Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex">
    <div>Flex Item</div>
    <div class="_align-self:baseline">Aligned Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex">
    <div>Flex Item</div>
    <div class="_align-self:stretch">Aligned Flex Item</div>
    <div>Flex Item</div>
</div>

Flexbox align self utilities can also be applied responsively. Here are the available helper classes::

  • ._align-self:start or ._align-self:flex-start
  • ._align-self:end or ._align-self:flex-end
  • ._align-self:center
  • ._align-self:baseline
  • ._align-self:stretch
  • ._{xs|sm|md|lg|xl|xxl}:align-self:start
  • ._{xs|sm|md|lg|xl|xxl}:align-self:end
  • ._{xs|sm|md|lg|xl|xxl}:align-self:center
  • ._{xs|sm|md|lg|xl|xxl}:align-self:baseline
  • ._{xs|sm|md|lg|xl|xxl}:align-self:stretch

Align Content

Use _align-content utilities on flexbox containers to align flex content on the secondary axis. You can use one of start, end, center, between, around, or stretch.

For demonstration purposes, the examples below use ._flex-wrap:wrap, an increased height, and large number of items.

Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
<div class="_display:flex _flex-wrap:wrap _align-content:start" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap _align-content:center" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap _align-content:end" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap _align-content:space-between" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap _align-content:space-around" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap _align-content:stretch" style="max-width: 600px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::

  • ._align-content:start or ._align-content:flex-start
  • ._align-content:center or ._align-content:flex-center
  • ._align-content:end
  • ._align-content:space-between
  • ._align-content:space-around
  • ._align-content:space-stretch
  • ._{xs|sm|md|lg|xl|xxl}:align-content:start
  • ._{xs|sm|md|lg|xl|xxl}:align-content:center
  • ._{xs|sm|md|lg|xl|xxl}:align-content:end
  • ._{xs|sm|md|lg|xl|xxl}:align-content:space-between
  • ._{xs|sm|md|lg|xl|xxl}:align-content:space-around
  • ._{xs|sm|md|lg|xl|xxl}:align-content:space-stretch

Fill

Use _flex:fill utilities on a on a series of flexbox items to force them into widths equal to their content.

Flex Item with a lot of content
Flex Item
Flex Item
<div class="_display:flex">
    <div class="_flex:fill">Flex Item with a lot of content</div>
    <div class="_flex:fill">Flex Item</div>
    <div class="_flex:fill">Flex Item</div>
</div>

Flexbox fill utilities can also be applied responsively. Here are the available helper classes::

  • ._flex:fill
  • ._{xs|sm|md|lg|xl|xxl}:flex:fill

Grow and shrink

Use _flex-grow:1 and _flex-grow:0 utilities to toggle a flex item’s ability to grow to fill available space. In the example below. A value of 1 uses all available space it can, while allowing the remaining two flex items their necessary space.

Flex Grow 1 Item
Flex Item
Flex Item
<div class="_display:flex">
    <div class="_flex-grow:1">Flex Grow 1 Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

Use the _flex-shrink:1 and _flex-shrink:0 utilities to toggle a flex item’s ability to shrink if necessary. This can be used together with a width: 100% div to make some flex items cover as little space as possible.

Flex Item
Flex Shrink
<div class="_display:flex">
    <div class="_width:100">Flex Item</div>
    <div class="_flex-shrink:1">Flex Shrink</div>
</div>

Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::

  • ._flex-grow:0
  • ._flex-grow:1
  • ._flex-shrink:0
  • ._flex-shrink:1
  • ._{xs|sm|md|lg|xl|xxl}:flex-grow:0
  • ._{xs|sm|md|lg|xl|xxl}:flex-grow:1
  • ._{xs|sm|md|lg|xl|xxl}:flex-shrink:0
  • ._{xs|sm|md|lg|xl|xxl}:flex-shrink:1

Auto Margins

When you mix flex alignments with auto margins you can obtain some pretty unique and useful layouts.

Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
<div class="_display:flex">
    <div class="_margin-right:auto">Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div class="_margin-left:auto">Flex Item</div>
</div>

<div class="_display:flex _flex-direction:column">
    <div class="_margin-bottom:auto">Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-direction:column">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div class="_margin-top:auto">Flex Item</div>
</div>

Wrapping

Change how flex items wrap in a flex container. To have wrapping disabled (browser default) use _flex-wrap:nowrap. To enable wrapping, use _flex-wrap:wrap, or reverse wrapping with _flex-wrap:wrap-reverse.

Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
<div class="_display:flex _flex-wrap:nowrap" style="max-width: 180px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap" style="max-width: 400px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

<div class="_display:flex _flex-wrap:wrap-reverse" style="max-width: 400px;">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>

Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::

  • ._flex-wrap:wrap or _flex:wrap
  • ._flex-wrap:wrap-reverse or _flex:wrap-reverse
  • ._flex-wrap:nowrap or _flex:nowrap
  • ._{xs|sm|md|lg|xl|xxl}:flex-wrap:wrap
  • ._{xs|sm|md|lg|xl|xxl}:flex-wrap:wrap-reverse
  • ._{xs|sm|md|lg|xl|xxl}:flex-wrap:nowrap

Order

You can change the order of flex items with a handful of order utilities. You can use _order:first to make an item first or _order:last to make an item last. You can use _order:{value} (where value can be a number from 0 to 12) to change the order of elements to a specific position.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
<div class="_display:flex">
    <div>Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
    <div class="_order:first">Flex Item 4</div>
</div>

<div class="_display:flex">
    <div class="_order:last">Flex Item 1</div>
    <div>Flex Item 2</div>
    <div>Flex Item 3</div>
    <div>Flex Item 4</div>
</div>

<div class="_display:flex">
    <div class="_order:4">Flex Item 1</div>
    <div class="_order:3">Flex Item 2</div>
    <div class="_order:2">Flex Item 3</div>
    <div class="_order:1">Flex Item 4</div>
</div>

Flexbox shrink and grow utilities can also be applied responsively. Here are the available helper classes::

  • ._order:first
  • ._order:last
  • ._order:{0-12}
  • ._{xs|sm|md|lg|xl|xxl}:order:first
  • ._{xs|sm|md|lg|xl|xxl}:order:last
  • ._{xs|sm|md|lg|xl|xxl}:order:{0-12}