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.
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.
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.
Horizontal Direction (By default)
You can use the ".flex-column" to set a vertical direction, or ".flex-column-reverse" to start the vertical direction from the opposite side.
Responsive variations can also be used for flex-direction:
The justify-content utility is used to change the alignment of flex-items on the main axis.
Responsive variations for justify-content
You can also use responsive variations with justify-content.
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).
Responsive variations for align-items
You can also use responsive variations for align-items.
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).
Responsive variation for align-self
You can also use responsive variations for align-self.
In flexbox, you can mix flex alignments with auto margins to do some pretty awesome things.
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.
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.
It is used to change how flex items wrap in a flex container. You can choose the following:
No wrapping: .flex-nowrap
Reverse wrapping: .flex-wrap-reverse
Responsive variation for flex-wrap
You can also use responsive variations for flex-wrap.
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.
Responsive variations for order
You can also use responsive variations for order:
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.
Responsive variations for align-content
You can also use responsive variations for align-content:
Next TopicBootstrap Display property