Flexbox

Flexbox is used to quickly manage the layout, alignment and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

You can also do complex implementations using custom CSS.

Flexbox Properties:

• Enable flex behaviors
• Direction
• Justify content
• Align items
• Align self
• Auto margins with justify-content
• Auto margins with align-items
• Wrap
• Order
• Align content

Enable Flex Behavior

The "display" utility is used to create a flexible container and transform direct children elements into flex items.

You can modify flex container and items further with additional flex properties.

Default flexbox container:

Inline Flexbox container:

Responsive flexbox container:

Responsive variations also exist for .d-flex and .d-inline-flex.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Flexbox Direction

You can set the direction of flex item in a flex container using direction utilities. It is not necessary to add a horizontal class here because by default it is row. If you find a situation where you have to set this value you can use ".flex-row" to set a horizontal direction (the browser default), or ".flex-row-reverse" to start the horizontal direction from the opposite side.

Example

Horizontal Direction (By default)

Vertical Direction

You can use the ".flex-column" to set a vertical direction, or ".flex-column-reverse" to start the vertical direction from the opposite side.

Example

Responsive variations can also be used for flex-direction:

Rows:

.flex-row
.flex-row-reverse

Columns:

.flex-column
.flex-column-reverse

Small:

.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse

Medium:

.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse

Large:

.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column

.flex-lg-column-reverse

Extra-large:

.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

Justify Content

The justify-content utility is used to change the alignment of flex-items on the main axis.

Example:

Responsive variations for justify-content

You can also use responsive variations with justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around

Align Items

The align items utility is used on flexbox containers to change the alignment of flex items on the cross axis. You can choose from start, end, center, baseline, or stretch (browser default).

Example:

Responsive variations for align-items

You can also use responsive variations for align-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Align Self

The align-self-utility is used on flexbox items to individually change their alignment on the cross axis. You can choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Example:

Responsive variation for align-self

You can also use responsive variations for align-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

Auto margins

In flexbox, you can mix flex alignments with auto margins to do some pretty awesome things.

With justify-content

You can easily move all flex items to one side, but keep another on the opposite end by mixing justify-content with margin-right: auto or margin-left: auto.

Example:

With align-items

You can similarly move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

Example:

Wrap

It is used to change how flex items wrap in a flex container. You can choose the following:

No wrapping: .flex-nowrap

Wrapping: .flex-wrap

Reverse wrapping: .flex-wrap-reverse

Responsive variation for flex-wrap

You can also use responsive variations for flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Order:

It is used to change the visual order of specific flex items with a handful of order utilities.

You can make an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.

Example:

Responsive variations for order

You can also use responsive variations for order:

• .order-first
• .order-last
• .order-unordered
• .order-sm-first
• .order-sm-last
• .order-sm-unordered
• .order-md-first
• .order-md-last
• .order-md-unordered
• .order-lg-first
• .order-lg-last
• .order-lg-unordered
• .order-xl-first
• .order-xl-last
• .order-xl-unordered

Align Content

The align-content utility is used on flexbox container to align flex items together on the cross axis. You can choose from start (browser default), end, center, between, around, or stretch.

To demonstrate these utilities, we have enforced flex-wrap: wrap and increased the number of flex items.

Heads up! This property has no affect on single rows of flex items.

start:

end:

center:

between:

around:

stretch:

Responsive variations for align-content

You can also use responsive variations for align-content:

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch