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.
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
.d-xxl-flex
.d-xxl-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.
Horizontal Direction (By default) Example -
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 -
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
Responsive variations for align-content
You can also use responsive variations for align-content: