Flex utilities

Responsive utility classes which can be used to set the direction, layout, alignment, wrapping, ordering (and more) of flexbox items.

Enable flex behavior #

In order to enable flex behavior, the display property must be set to flex or inline-flex. Once this is done, flex containers and items can then be modified using other flex utilities. You can enable flex behavior using the following classes:

  • .d-flex / .d-{breakpoint}-flex
  • .d-inline-flex / .d-{breakpoint}-inline-flex

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

Direction #

The direction of flex items in a flexbox container can be set using the direction utility classes.

Flex row

Set the flex-direction property to row or row-reverse using the following classes:

  • .flex-row / .flex-{breakpoint}-row — sets a horizontal direction (browser default)
  • .flex-row-reverse / .flex-{breakpoint}-row-reverse — sets a horizontal direction but starting from the opposite side
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
HTML 
<!-- Flex row -->
<div class="d-flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex row reverse -->
<div class="d-flex flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex column

Set the flex-direction property to column or column-reverse using the following classes:

  • .flex-column / .flex-{breakpoint}-column — sets a vertical direction
  • .flex-column-reverse / .flex-{breakpoint}-column-reverse — sets a vertical direction but starting from the opposite side
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
HTML 
<!-- Flex column -->
<div class="d-flex flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex column reverse -->
<div class="d-flex flex-column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify content #

Set the alignment of all the flexbox container items on the main axis using .justify-content-{alignment} / .justify-content-{breakpoint}-{alignment}. The main direction is the x-axis by default, but can be set to the y-axis using flex-direction: column. The {alignment} can be start (browser default), end, center, between, around, or evenly.

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
Item 1
Item 2
Item 3
HTML 
<!-- Justify content start -->
<div class="d-flex justify-content-start">...</div>

<!-- Justify content end -->
<div class="d-flex justify-content-end">...</div>

<!-- Justify content center -->
<div class="d-flex justify-content-center">...</div>

<!-- Justify content between -->
<div class="d-flex justify-content-between">...</div>

<!-- Justify content around -->
<div class="d-flex justify-content-around">...</div>

<!-- Justify content evenly -->
<div class="d-flex justify-content-evenly">...</div>

Align items #

Set the alignment of all the flexbox container items on the cross axis using .align-items-{alignment} / .align-items-{breakpoint}-{alignment}. The cross direction is the y-axis by default, but can be set to the x-axis using flex-direction: column. The {alignment} can be start, end, center, baseline, or stretch (browser default).

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
HTML 
<!-- Align items start -->
<div class="d-flex align-items-start">...</div>

<!-- Align items end -->
<div class="d-flex align-items-end">...</div>

<!-- Align items center -->
<div class="d-flex align-items-center">...</div>

<!-- Align items baseline -->
<div class="d-flex align-items-baseline">...</div>

<!-- Align items stretch -->
<div class="d-flex align-items-stretch">...</div>

Align self #

Set the alignment of individual items (inside a flexbox container) on the cross axis using .align-self-{alignment} / .align-self-{breakpoint}-{alignment}. The cross direction is the y-axis by default, but can be set to the x-axis using flex-direction: column. The {alignment} can be start, end, center, baseline, or stretch (browser default).

Start
Center
End
Baseline
Stretch
HTML 
<div class="d-flex">
  <!-- Align self start -->
  <div class="align-self-start">Start</div>

  <!-- Align self center -->
  <div class="align-self-center">Center</div>

  <!-- Align self end -->
  <div class="align-self-end">End</div>
</div>

<div class="d-flex">
  <!-- Align self baseline -->
  <div class="align-self-baseline">Baseline</div>

  <!-- Align self stretch -->
  <div class="align-self-stretch">Stretch</div>
</div>

Fill #

You can use the .flex-fill / .flex-{breakpoint}-fill classes on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

Item 1 with extra content
Item 2
Item 3
HTML 
<!-- Flex fill -->
<div class="d-flex">
  <div class="flex-fill">Item 1 with extra content</div>
  <div class="flex-fill">Item 2</div>
  <div class="flex-fill">Item 3</div>
</div>

Grow and shrink #

The ability of a flex item to grow and shrink when necessary can be set using the grow/shrink utility classes.

Flex grow

The flex-grow property can be set using the following classes:

  • .flex-grow-0 / .flex-{breakpoint}-grow-0 — makes sure the element will not grow even if there's available space (browser default)
  • .flex-grow-1 / .flex-{breakpoint}-grow-1 — makes sure the element will grow by a factor of 1 (fill up the remaining space)
Item 1
Item 2
Item 3
HTML 
<!-- Flex grow -->
<div class="d-flex">
  <div class="flex-grow-1">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex shrink

The flex-shrink property can be set using the following classes:

  • .flex-shrink-0 / .flex-{breakpoint}-shrink-0 — makes sure the element will not shrink
  • .flex-shrink-1 / .flex-{breakpoint}-shrink-1 — makes sure the element will shrink by a factor of 1 if there is not enough space available (browser default)

In the example below, the first flex item is given width: 100%. The second flex item is given the .flex-shrink-1 class, which makes it shrink (text wraps to new line) to accommodate for the first flex item.

Item 1 tries to take up the full width of parent
Item 2
HTML 
<!-- Flex shrink -->
<div class="d-flex">
  <div class="w-100">Item 1 tries to take up the full width of parent</div>
  <div class="flex-shrink-1">Item 2</div>
</div>

Auto margins #

Thanks to flexbox, flex items can be pushed to the left or right using auto margins. For example, the class .ms-auto will push the item, and the ones that come after, to the right (inverted in RTL), while the class .me-auto will push the item, and the ones that come before, to the left (inverted in RTL).

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
HTML 
<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="ms-auto">Item 3</div>
</div>

<div class="d-flex">
  <div>Item 1</div>
  <div class="ms-auto">Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex">
  <div>Item 1</div>
  <div class="me-auto">Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex">
  <div class="me-auto">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Auto margins With align items #

Flex items can also be pushed to the top or bottom using auto margins by combining align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
HTML 
<div class="d-flex align-items-start flex-column">
  <div class="mb-auto">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex align-items-end flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="mt-auto">Item 3</div>
</div>

Wrap #

The flex-wrap property of flex items can be set using the following classes:

  • .flex-nowrap / .flex-{breakpoint}-nowrap — sets it to nowrap
  • .flex-wrap / .flex-{breakpoint}-wrap — sets it to wrap
  • .flex-wrap-reverse / .flex-{breakpoint}-wrap-reverse — sets it to wrap-reverse
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
HTML 
<!-- No wrap -->
<div class="d-flex flex-nowrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrap -->
<div class="d-flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Reverse wrap -->
<div class="d-flex flex-wrap-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Order #

Change the visual order of specific flex items with a handful of order utilities. These utilities come in the following formats:

  • .order-{value} / .order-{breakpoint}-{value} — where {value} can be 0, 1, 2, 3, 4, or 5
  • .order-first / .order-{breakpoint}-first — sets order to -1
  • .order-last / .order-{breakpoint}-last — sets order to 6
Item 1
Item 2
Item 3
Item 1
Item 2
HTML 
<div class="d-flex">
  <div class="order-3">Item 1</div>
  <div class="order-2">Item 2</div>
  <div class="order-1">Item 3</div>
</div>

<div class="d-flex">
  <div class="order-last">Item 1</div>
  <div class="order-first">Item 2</div>
</div>

Align content #

You can use the .align-content-{alignment} / .align-content-{breakpoint}-{alignment} on flexbox containers to align the flex items together on the cross axis. This is the y-axis by default, but can be set to the x-axis using flex-direction: column. The {alignment} can be start, end, center, between, around, or stretch (browser default).

Please note, this property has no effect on single rows of flex items, therefore, the flex-wrap: wrap property has been used to demonstrate the alignment of the content in the example below.

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
Item 1
Item 2
Item 3
HTML 
<!-- Align content start -->
<div class="d-flex align-content-start flex-wrap">...</div>

<!-- Align content end -->
<div class="d-flex align-content-end flex-wrap">...</div>

<!-- Align content center -->
<div class="d-flex align-content-center flex-wrap">...</div>

<!-- Align content between -->
<div class="d-flex align-content-between flex-wrap">...</div>

<!-- Align content around -->
<div class="d-flex align-content-around flex-wrap">...</div>

<!-- Align content stretch -->
<div class="d-flex align-content-stretch flex-wrap">...</div>

Example #

As seen above, flex utilities are possibly the best way to handle different types of layout and positioning when you're building pages. Here's an example of a common UI/UX pattern which can be used for positioning an image next to some text.

All Things Must Pass

George Harrison

HTML 
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="ms-3">
    <h5 class="m-0">All Things Must Pass</h5>
    <p class="m-0 text-body-secondary">George Harrison</p>
  </div>
</div>
Up next
Float utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.