Skip to content

Flexbox

Flex utilities can be used to apply flexbox behaviors to elements by using utility classes.

Required reading

Before using these utilities, you should be familiar with CSS3 Flexible Box spec. If you are not, check out MDN's guide:

📖 Using CSS Flexible Boxes

Flex container

Use these classes to make an element lay out its content using the flexbox model. Each direct child of the flex container will become a flex item.

.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
ClassDescription
.d-flexThe element behaves like a block and lays out its content using the flexbox model.
.d-inline-flexThe element behaves like an inline element and lays out its content using the flexbox model.

Example using .d-flex

View in Storybook

Example using .d-inline-flex

View in Storybook

Flex direction

Use these classes to define the orientation of the main axis (row or column). By default, flex items will display in a row. Use .flex-column to change the direction of the main axis to vertical.

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
ClassDescription
.flex-rowThe main axis runs left to right (default).
.flex-row-reverseThe main axis runs right to left.
.flex-columnThe main axis runs top to bottom.
.flex-column-reverseThe main axis runs bottom to top.

Example using .flex-column

View in Storybook

Example using .flex-column-reverse

This example uses the responsive variant .flex-sm-column-reverse to override .flex-column Learn more about responsive flexbox utilities. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.

View in Storybook

Example using .flex-row

This example uses the responsive variant .flex-sm-row to override .flex-column Learn more about responsive flexbox utilities.

View in Storybook

Example using .flex-row-reverse

This example uses the responsive variant .flex-sm-row-reverse to override .flex-column Learn more about responsive flexbox utilities. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.

View in Storybook

Flex wrap

You can choose whether flex items are forced into a single line or wrapped onto multiple lines.

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
ClassDescription
.flex-wrapFlex items will break onto multiple lines (default)
.flex-nowrapFlex items are laid out in a single line, even if they overflow
.flex-wrap-reverseBehaves the same as wrap but cross-start and cross-end are permuted.

flex-wrap example

View in Storybook

flex-nowrap example

View in Storybook

flex-wrap-reverse example

View in Storybook

Justify content

Use these classes to distribute space between and around flex items along the main axis of the container.

.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-center { justify-content: center; }
.flex-justify-between { justify-content: space-between; }
.flex-justify-around { justify-content: space-around; }
ClassDefault behavior
.flex-justify-startJustify all items to the left
.flex-justify-endJustify all items to the right
.flex-justify-centerJustify items to the center of the container
.flex-justify-betweenDistribute items evenly. First item is on the start line, last item is on the end line.
.flex-justify-aroundDistribute items evenly with equal space around them

flex-justify-start

Use .flex-justify-start to align items to the start line. By default this will be on the left side of the container. If you are using .flex-column, the start line will be at the top of the container.

View in Storybook

flex-justify-end

Use .flex-justify-end to align items to the end line. By default this will be on the right side of the container. If you are using .flex-column, the end line will be at the bottom of the container.

View in Storybook

flex-justify-center

Use .flex-justify-center to align items in the middle of the container.

View in Storybook

flex-justify-between

Use .flex-justify-between to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.

View in Storybook

flex-justify-around

Use .flex-justify-around to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.

View in Storybook

Align items

Use these classes to align items on the cross axis.

The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use flex-column to make the main axis run vertically, your items will be aligned horizontally.

.flex-items-start { align-items: flex-start; }
.flex-items-end { align-items: flex-end; }
.flex-items-center { align-items: center; }
.flex-items-baseline { align-items: baseline; }
.flex-items-stretch { align-items: stretch; }
ClassBehavior
.flex-items-startAlign items to the start of the cross axis
.flex-items-endAlign items to the end of the cross axis
.flex-items-centerAlign items to the center of the cross axis
.flex-items-baselineAlign items along their baselines
.flex-items-stretchStretch items from start of cross axis to end of cross axis

flex-items-start

View in Storybook

flex-items-end

View in Storybook

flex-items-center

View in Storybook

flex-items-baseline

With .flex-items-baseline, items will be aligned along their baselines even if they have different font sizes.

View in Storybook

flex-items-stretch

View in Storybook

Align content

When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.

.flex-content-start { align-content: flex-start; }
.flex-content-end { align-content: flex-end; }
.flex-content-center { align-content: center; }
.flex-content-between { align-content: space-between; }
.flex-content-around { align-content: space-around; }
.flex-content-stretch { align-content: stretch; }
ClassDescription
.flex-content-startAlign content to the start of the cross axis
.flex-content-endAlign content to the end of the cross axis
.flex-content-centerAlign content to the center of the cross axis
.flex-content-betweenDistribute content evenly. First line is on the start of the cross axis, last line is on the end of the cross axis.
.flex-content-aroundStretch items from the start of the cross axis to the end of the cross axis.
.flex-content-stretchLines stretch to occupy available space.

flex-content-start

View in Storybook

flex-content-end

View in Storybook

flex-content-center

View in Storybook

flex-content-between

View in Storybook

flex-content-around

View in Storybook

flex-content-stretch

View in Storybook

Flex

Use this class to specify the ability of a flex item to alter its dimensions to fill available space.

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink-0 { flex-shrink: 0; }
ClassDescription
.flex-1Fills available space
.flex-autoFills available space and auto-sizes based on the content
.flex-grow-0Prevents growing of a flex item
.flex-shrink-0Prevents shrinking of a flex item

flex-1

Adding .flex-1 makes the item grow in size to take up all the space that is available.

View in Storybook

Adding .flex-1 to all flex items results in each item having the same size.

View in Storybook

flex-auto

Using .flex-auto fills the available space but also takes the size of the content into account. Type in the editor below to see the effect.

View in Storybook

flex-grow-0

Add .flex-grow-0 to prevent an item from growing. This can be useful when used as a responsive variant. For example to stop growing when the viewport gets wider.

View in Storybook

flex-shrink-0

Add .flex-shrink-0 to prevent an item from shrinking. Note that for example text will not wrap and the flex items start to overflow if there is not enough space.

View in Storybook

Align self

Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any align-items property applied to the flex container.

.flex-self-auto { align-self: auto; }
.flex-self-start { align-self: flex-start; }
.flex-self-end { align-self: flex-end; }
.flex-self-center { align-self: center; }
.flex-self-baseline { align-self: baseline; }
.flex-self-stretch { align-self: stretch; }
ClassDescription
.flex-self-autoInherit alignment from parent
.flex-self-startAlign to the start of the cross axis
.flex-self-endAlign to the end of the cross axis
.flex-self-centerAlign to center of cross axis
.flex-self-baselineAlign baseline to the start of the cross axis
.flex-self-stretchStretch item from start of cross axis to end of cross axis.

flex-self-auto

View in Storybook

flex-self-start

View in Storybook

flex-self-end

View in Storybook

flex-self-center

View in Storybook

flex-self-baseline

View in Storybook

flex-self-stretch

View in Storybook

Order

Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.

.flex-order-1 { order: 1; }
.flex-order-2 { order: 2; }
.flex-order-none { order: inherit; }
ClassDescription
.flex-order-1Set order to be 1
.flex-order-2Set order to be 2
.flex-order-noneRemove order (typically used with responsive variants)

flex-order (1+2)

View in Storybook

flex-order-none

Resize window to see the effect.

View in Storybook

Responsive flex utilities

All flexbox utilities can be adjusted per breakpoint using the following formulas:

  • d-[breakpoint]-[property] for display
  • flex-[breakpoint]-[property]-[behavior] for various flex properties

Each responsive style is applied to the specified breakpoint and up.

Example classes

/* Example classes */
.d-sm-flex {}
.d-md-inline-flex {}
.flex-lg-row {}
.flex-xl-column {}
.flex-sm-wrap {}
.flex-lg-nowrap {}
.flex-lg-self-start {}

Example usage

Mixing flex properties:

View in Storybook

Example components

The flex utilities can be used to create a number of components. Here are some examples.

Media object

You can use flex utilities to make a simple media object, like this:

View in Storybook

Responsive media object

Here is an example of a media object that is vertically centered on large screens, but converts to a stacked column layout on small screens.

View in Storybook

Flexbox bugs

This section lists flexbox bugs that affect browsers we currently support.

  1. Minimum content sizing of flex items not honored. Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply flex-shrink: 0; to the items using d-flex. This can be applied with the flex-shrink-0 utility. For more information read philipwalton/flexbugs.
  2. Some elements can't be flex containers. Specifically, <button>, <fieldset>, and <summary> elements cannot be styled with display: flex in Safari. Instead of using class="d-flex" on these elements, you should nest an element within them, e.g. <summary><div class="d-flex">...</div></summary>.