Flex Utilities

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.

Flexbox Utility Example
I'm a flexbox container
Inline Flexbox Utility Example
I'm an inline flexbox container

Flexbox utilities can be applied responsively using the following helper classes:

  • ._display-flex
  • ._display-inline-flex
  • ._display-{xs|sm|md|lg|xl}-flex
  • ._display-{xs|sm|md|lg|xl}-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.

Flexbox Row Direction Utility
Flex Item 1
Flex Item 2
Flex Item 1
Flex Item 2

Column Direction

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

Flexbox Column Direction Utility
Flex Item 1
Flex Item 2
Flex Item 1
Flex Item 2

Flexbox direction utilities can be applied responsively using the following helper classes:

  • ._flex-direction-row
  • ._flex-direction-row-reverse
  • ._flex-direction-column
  • ._flex-direction-column-reverse
  • ._flex-direction-{xs|sm|md|lg|xl}-row
  • ._flex-direction-{xs|sm|md|lg|xl}-row-reverse
  • ._flex-direction-{xs|sm|md|lg|xl}-column
  • ._flex-direction-{xs|sm|md|lg|xl}-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).

Flexbox Justify Content Utility
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

Flexbox justify content utilities can be applied responsively using the following helper classes:

  • ._justify-content-start
  • ._justify-content-end
  • ._justify-content-center
  • ._justify-content-space-between
  • ._justify-content-space-around
  • ._justify-content-{xs|sm|md|lg|xl}-start
  • ._justify-content-{xs|sm|md|lg|xl}-end
  • ._justify-content-{xs|sm|md|lg|xl}-center
  • ._justify-content-{xs|sm|md|lg|xl}-space-between
  • ._justify-content-{xs|sm|md|lg|xl}-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).

Flexbox Align Items Utility
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

Flexbox align items utilities can be applied responsively using the following helper classes:

  • ._align-items-start
  • ._align-items-end
  • ._align-items-center
  • ._align-items-baseline
  • ._align-items-stretch
  • ._align-items-{xs|sm|md|lg|xl}-start
  • ._align-items-{xs|sm|md|lg|xl}-end
  • ._align-items-{xs|sm|md|lg|xl}-center
  • ._align-items-{xs|sm|md|lg|xl}-baseline
  • ._align-items-{xs|sm|md|lg|xl}-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).

Flexbox Align Self Utility
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

Flexbox align self utilities can be applied responsively using the following helper classes:

  • ._align-self-start
  • ._align-self-end
  • ._align-self-center
  • ._align-self-baseline
  • ._align-self-stretch
  • ._align-self-{xs|sm|md|lg|xl}-start
  • ._align-self-{xs|sm|md|lg|xl}-end
  • ._align-self-{xs|sm|md|lg|xl}-center
  • ._align-self-{xs|sm|md|lg|xl}-baseline
  • ._align-self-{xs|sm|md|lg|xl}-stretch

Fill

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

Flexbox Fill Utility
Flex Item with a lot of content
Flex Item
Flex Item

Flexbox fill utilities can be applied responsively using the following helper classes:

  • ._flex-fill
  • ._flex-{xs|sm|md|lg|xl}-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.

Flexbox Grow Utility
Flex Grow 1 Item
Flex Item
Flex Item

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.

Flexbox Shrink Utility
Flex Item
Flex Shrink

Flexbox shrink and grow utilities can be applied responsively using the following helper classes:

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

Auto Margins

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

Flexbox Auto Margins Utility
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item

Wrapping

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

Flexbox No Wrap Utility
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
Flexbox Wrap Utility
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

Flexbox shrink and grow utilities can be applied responsively using the following helper classes:

  • ._flex-wrap
  • ._flex-wrap-reverse
  • ._flex-nowrap
  • ._flex-{xs|sm|md|lg|xl}-wrap
  • ._flex-{xs|sm|md|lg|xl}-wrap-reverse
  • ._flex-{xs|sm|md|lg|xl}-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 1 to 12) to change the order of elements to a specific position.

Flexbox Order Utility
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

Flexbox shrink and grow utilities can be applied responsively using the following helper classes:

  • ._order-first
  • ._order-last
  • ._order-{1-12}
  • ._order-{xs|sm|md|lg|xl}-first
  • ._order-{xs|sm|md|lg|xl}-last
  • ._order-{xs|sm|md|lg|xl}-{1-12}

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 demo purposes, the examples are enforced to have flex-wrap: wrap using ._flex-wrap and have an increased height and number of items.

Flexbox Align Content Utility
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

Flexbox shrink and grow utilities can be applied responsively using the following helper classes:

  • ._align-content-start
  • ._align-content-center
  • ._align-content-end
  • ._align-content-space-between
  • ._align-content-space-around
  • ._align-content-space-stretch
  • ._align-content-{xs|sm|md|lg|xl}-start
  • ._align-content-{xs|sm|md|lg|xl}-center
  • ._align-content-{xs|sm|md|lg|xl}-end
  • ._align-content-{xs|sm|md|lg|xl}-space-between
  • ._align-content-{xs|sm|md|lg|xl}-space-around
  • ._align-content-{xs|sm|md|lg|xl}-space-stretch