Flex
Utility classes for controlling flex layouts. Provides flexible alignment and distribution capabilities through flex properties. More adaptive than traditional grid systems for complex layouts.
Basic Usage
Direction Control
Use .flex-row (default) or .flex-row-reverse for horizontal layouts:
Use .flex-column or .flex-column-reverse for vertical layouts:
Content Alignment
Control main axis alignment with .justify-content-* (start/end/center/between/around/evenly):
Control cross axis alignment with .align-items-* (start/end/center/baseline/stretch):
Multi-line alignment with .align-content-* (start/end/center/between/around/stretch):
Individual Alignment
Adjust single item alignment with .align-self-*:
Item Scaling
Equal-width items with .flex-fill:
Growth control with .flex-grow-*:
Shrink control with .flex-shrink-*:
Order Adjustment
Modify visual order with .order-*:
Quick Reference
| Class | Styles |
|---|---|
.d-flex | display: flex |
.d-inline-flex | display: inline-flex |
.flex-fill | flex: 1 1 auto |
.flex-row | flex-direction: row |
.flex-row-reverse | flex-direction: row-reverse |
.flex-column | flex-direction: column |
.flex-column-reverse | flex-direction: column-reverse |
.flex-wrap | flex-wrap: wrap |
.flex-nowrap | flex-wrap: nowrap |
.flex-wrap-reverse | flex-wrap: wrap-reverse |
.justify-content-start | justify-content: flex-start |
.justify-content-end | justify-content: flex-end |
.justify-content-center | justify-content: center |
.justify-content-between | justify-content: space-between |
.justify-content-around | justify-content: space-around |
.justify-content-evenly | justify-content: space-evenly |
.align-items-start | align-items: flex-start |
.align-items-end | align-items: flex-end |
.align-items-center | align-items: center |
.align-items-baseline | align-items: baseline |
.align-items-stretch | align-items: stretch |
.align-content-start | align-content: flex-start |
.align-content-end | align-content: flex-end |
.align-content-center | align-content: center |
.align-content-between | align-content: space-between |
.align-content-around | align-content: space-around |
.align-content-stretch | align-content: stretch |
.align-self-start | align-self: flex-start |
.align-self-end | align-self: flex-end |
.align-self-center | align-self: center |
.align-self-baseline | align-self: baseline |
.align-self-stretch | align-self: stretch |
.flex-grow-0 | flex-grow: 0 |
.flex-grow-1 | flex-grow: 1 |
.flex-shrink-0 | flex-shrink: 0 |
.flex-shrink-1 | flex-shrink: 1 |
.order-first | order: -1 |
.order-1 | order: 1 |
.order-2 | order: 2 |
.order-3 | order: 3 |
.order-4 | order: 4 |
.order-5 | order: 5 |
.order-last | order: 6 |
All classes support responsive prefixes like
sm:,md:,lg:,xl:etc.