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?ve 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