Flex utilities

Halfmoon comes with responsive utility classes which can be used to set the layout, alignment, and sizing of grid columns, or other flexbox based components.

Before we begin

The {breakpoint} keyword can be found in many of the utility classes presented on this page. In all cases, the {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

Moreover, the boxes in the examples are given a border, along with margin and padding. None of this is shown in the code for the sake of conciseness.

Enable flex behaviors #

The display property can be set to flex or inline-flex using the following classes:

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

Flex containers and items can then be modified using other flex utilities.

Flexbox container
Inline flexbox container 
<!-- Display flex -->
<div class="d-flex">
  Flexbox container
</div>
<!-- Dispaly inline-flex -->
<div class="d-inline-flex">
  Inline flexbox container
</div>

Flex direction #

The direction of flex items in a flexbox container can be set using the following classes:

Flex row

  • .flex-row/.flex-{breakpoint}-row sets a horizontal direction. This is the 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
<!-- Flex direction row -->
<div class="d-flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<!-- Flex direction reversed row -->
<div class="d-flex flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex column

  • .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
<!-- Flex direction column -->
<div class="d-flex flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<!-- Flex direction reversed column -->
<div class="d-flex flex-column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify content #

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

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
<!-- Items justified at the start -->
<div class="d-flex justify-content-start">
  ...
</div>
<!-- Items justified at the end -->
<div class="d-flex justify-content-end">
  ...
</div>
<!-- Items justified at the center -->
<div class="d-flex justify-content-center">
  ...
</div>
<!-- Items justified between -->
<div class="d-flex justify-content-between">
  ...
</div>
<!-- Items justified around -->
<div class="d-flex justify-content-around">
  ...
</div>

Align items #

The classes .align-items-{alignment}/.align-items-{breakpoint}-{alignment} can be used to set the alignment of all the flexbox container items on the cross axis. This is y-axis by default, but can be set to 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
<!-- Items aligned at the start -->
<div class="d-flex align-items-start">
  ...
</div>
<!-- Items aligned at the end -->
<div class="d-flex align-items-end">
  ...
</div>
<!-- Items aligned at the center -->
<div class="d-flex align-items-center">
  ...
</div>
<!-- Items aligned at the baseline -->
<div class="d-flex align-items-baseline">
  ...
</div>
<!-- Items aligned stretch -->
<div class="d-flex align-items-stretch">
  ...
</div>

Align self #

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

Start
Center
End
Baseline
Stretch
<!-- First flexbox container -->
<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>
<!-- Second flexbox container -->
<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>

Flex fill #

The classes .flex-fill/.flex-{alignment}-fill can be used 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 some extra content
Item 2
Item 3
<!-- Flex fill -->
<div class="d-flex">
  <div class="flex-fill">Item 1 with some extra content</div>
  <div class="flex-fill">Item 2</div>
  <div class="flex-fill">Item 3</div>
</div>

Grow and shrink #

The following classes can be used to set a flex item's ability to grow and shrink when necessary:

Flex grow

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

Flex shrink

  • .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. This is the browser default.

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

Item 1 which tries to take up the full width of parent
Item 2
<div class="d-flex">
  <div class="w-full">Item 1 which tries to take up the full width of parent</div> <!-- w-full = width: 100% -->
  <!-- Flex shrink by a factor of 1 -->
  <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 .ml-auto will push the item (and the ones that come after) to the right, while the class .mr-auto will push the item (and the ones that come before) to the left.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<!-- First flexbox container -->
<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="ml-auto">Item 3</div> <!-- ml-auto = margin-left: auto -->
</div>
<!-- Second flexbox container -->
<div class="d-flex">
  <div>Item 1</div>
  <div class="ml-auto">Item 2</div> <!-- ml-auto = margin-left: auto -->
  <div>Item 3</div>
</div>
<!-- Third flexbox container -->
<div class="d-flex">
  <div>Item 1</div>
  <div class="mr-auto">Item 2</div> <!-- mr-auto = margin-right: auto -->
  <div>Item 3</div>
</div>
<!-- Fourth flexbox container -->
<div class="d-flex">
  <div class="mr-auto">Item 1</div> <!-- mr-auto = margin-right: auto -->
  <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
<!-- First flexbox container -->
<div class="d-flex align-items-start flex-column">
  <div class="mb-auto">Item 1</div> <!-- mb-auto = margin-bottom: auto -->
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<!-- Second flexbox container -->
<div class="d-flex align-items-end flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div class="mt-auto">Item 3</div> <!-- mt-auto = margin-top: auto -->
</div>

Flex 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.
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<!-- No wrap -->
<div class="d-flex flex-nowrap">
  ...
</div>
<!-- Wrap -->
<div class="d-flex flex-wrap">
  ...
</div>
<!-- Reverse wrap -->
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Order #

The visual order of the flex items can be controlled using the following classes:

  • .order-*/.order-{breakpoint}-*, where * is the order value and can be between 0 and 12 (both inclusive).
  • .order-first/.order-{breakpoint}-first
  • .order-last/.order-{breakpoint}-last
First
(unordered)
Second,
but last
Third,
but first
First,
but last
Second,
but first 
<!-- First flexbox container -->
<div class="d-flex">
  <div>First (unordered)</div>
  <div class="order-12">Second, but last</div>
  <div class="order-1">Third, but first</div>
</div>
<!-- Second flexbox container -->
<div class="d-flex">
  <div class="order-last">First, but last</div>
  <div class="order-first">Second, but first</div>
</div>

Align content #

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

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

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
<!-- 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>

Flex reset #

The classes .flex-reset/.flex-{breakpoint}-reset can be used to reset the flex property and set it to 0 1 auto (default), which is needed in some situations.

For example, form-controls in input groups (opens in new tab) and inline forms (opens in new tab) are given the flex: 1 1 0% property, which means that specific sizing utility classes such as .w-50 (sets width: 5rem (50px)) or .w-100 (sets width: 10rem (100px)) do not work on them, unless the .flex-reset class is used. 

<form class="form-inline w-400 mw-full" action="..." method="..."> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
  <input type="text" class="form-control flex-reset w-50" value="Mr." id="..." required="required"> <!-- flex-reset = flex: 0 1 auto, w-50 = width: 5rem (50px) -->
  <input type="text" class="form-control" value="John Doe" id="..." required="required">
  <input type="submit" class="btn btn-primary" value="Submit">
</form>

Credits and special thanks #

The flex utilities in Halfmoon are almost identical to the ones found in Bootstrap (with a few changes). Therefore, huge credits (and special thanks) must be given to the Bootstrap team and contributors. The appropriate copyright notice can be found in the CSS files.

Up next: Position utilities
On this page
Flex utilities Enable flex behaviors Flex direction Justify content Align items Align self Flex fill Grow and shrink Auto margins Auto margins with align-items Flex wrap Order Align content Flex reset Credits and special thanks

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI