Buy Now
  1. Components
  2. Utilities
  3. Flex

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable Flex

Apply display utilities to create a flexbox container and transform direct children elements into flex items.

I'm a flexbox container!
<div class="d-flex pd-10 bg-gray-200">I'm a flexbox container!</div>

Direction

Set the direction of flex items in a flex container with direction utilities.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bg-gray-200 mg-b-20">
  <div class="pd-10 bg-gray-300">Flex item 1</div>
  <div class="pd-10 bg-gray-400">Flex item 2</div>
  <div class="pd-10 bg-gray-500">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-gray-200">
  <div class="pd-10 bg-gray-300">Flex item 1</div>
  <div class="pd-10 bg-gray-400">Flex item 2</div>
  <div class="pd-10 bg-gray-500">Flex item 3</div>
</div>

Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis

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="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>

Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis

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="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-stretch">...</div>

Align Self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis

Flex item 1
Flex item 2
Flex item 3
Flex item 4
<div class="d-flex flex-row bg-gray-200 ht-100 mg-b-20">
  <div class="pd-10 bg-gray-300 align-self-start">Flex item 1</div>
  <div class="pd-10 bg-gray-400 align-self-center">Flex item 2</div>
  <div class="pd-10 bg-gray-500 align-self-end">Flex item 3</div>
  <div class="pd-10 bg-gray-400 align-self-stretch">Flex item 4</div>
</div>

Fill

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content

Flex item with a lot of content
Flex item
Flex item
<div class="d-flex bg-gray-200">
  <div class="pd-10 bg-gray-300 flex-fill">Flex item with a lot of content</div>
  <div class="pd-10 bg-gray-400 flex-fill">Flex item</div>
  <div class="pd-10 bg-gray-500 flex-fill">Flex item</div>
</div>
Grow & Shrink

Use .flex-grow utilities to toggle a flex item’s ability to grow to fill available space.

Flex item
Flex item
Third flex item
<div class="d-flex bg-gray-200">
  <div class="pd-10 bg-gray-300 flex-grow-1">Flex item</div>
  <div class="pd-10 bg-gray-400">Flex item</div>
  <div class="pd-10 bg-gray-500">Third flex item</div>
</div>

Auto Margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins.

Flex item
Flex item
Third flex item
<div class="d-flex bg-gray-200">
  <div class="pd-10 bg-gray-300 flex-grow-1">Flex item</div>
  <div class="pd-10 bg-gray-400">Flex item</div>
  <div class="pd-10 bg-gray-500 mg-l-auto">Third flex item</div>
</div>

Order

Change the visual order of specific flex items with a handful of order utilities.

First Item
Second Item
Third Item
<div class="d-flex bg-gray-200">
  <div class="pd-10 bg-gray-300 order-3">First Item</div>
  <div class="pd-10 bg-gray-400 order-2">Second Item</div>
  <div class="pd-10 bg-gray-500 order-1">Third Item</div>
</div>