Flex
Direction
Flex Direction Utilities set the flex-direction property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-row).
| Utility | Value |
|---|---|
| flex-row | row |
| flex-row-reverse | row-reverse |
| flex-column | column |
| flex-column-reverse | column-reverse |
Justify Content
Justify Content Utilities set the justify-content property, use the format justify-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., justify-content-md-center).
| Utility | Value |
|---|---|
| justify-content-start | flex-start |
| justify-content-center | center |
| justify-content-end | flex-end |
| justify-content-between | space-between |
| justify-content-around | space-around |
Align Items
Align Items Utilities set the align-items property, use the format align-items-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-items-md-center).
| Utility | Value |
|---|---|
| align-items-start | flex-start |
| align-items-center | center |
| align-items-end | flex-end |
| align-items-baseline | baseline |
| align-items-stretch | stretch |
Align Content
Align Content Utilities set the align-content property, use the format align-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-content-md-center).
| Utility | Value |
|---|---|
| align-content-start | flex-start |
| align-content-center | center |
| align-content-end | flex-end |
| align-content-between | space-between |
| align-content-around | space-around |
| align-content-stretch | stretch |
Align Self
Align Self Utilities set the align-self property, use the format align-self-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-self-md-center).
| Utility | Value |
|---|---|
| align-self-start | flex-start |
| align-self-center | center |
| align-self-end | flex-end |
| align-self-auto | auto |
| align-self-baseline | baseline |
| align-self-stretch | stretch |
Fill
flex-fill sets flex: 1 1 auto !important. This forces a flex item to fill the remaining space, just becareful using this with long text that has no white space. Use the format flex-{sm|md|lg|xl}-fill to target specific screen sizes (e.g., flex-md-fill).
| Utility | Value |
|---|---|
| flex-fill | flex: 1 1 auto |
Grow
Flex Grow Utilities set the flex-grow property, use the format flex-{sm|md|lg|xl}-grow-{value} to target specific screen sizes (e.g., flex-md-grow-1).
| Utility | Value |
|---|---|
| flex-grow-0 | 0 |
| flex-grow-1 | 1 |
Shrink
Flex Shrink Utilities set the flex-shrink property, use the format flex-{sm|md|lg|xl}-shrink-{value} to target specific screen sizes (e.g., flex-md-shrink-0).
| Utility | Value |
|---|---|
| flex-shrink-0 | 0 |
| flex-shrink-1 | 1 |
Wrap
Flex Wrap Utilities set the flex-wrap property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-nowrap).
| Utility | Value |
|---|---|
| flex-nowrap | nowrap |
| flex-wrap | wrap |
| flex-wrap-reverse | wrap-reverse |
Order
Order Utilities set the order property, use the format order-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., order-md-5).
| Utility | Value |
|---|---|
| order-first | - |
| order-last | 13 |
| order-0 | 0 |
| order-1 | 1 |
| order-2 | 2 |
| order-3 | 3 |
| order-4 | 4 |
| order-5 | 5 |
| order-6 | 6 |
| order-7 | 7 |
| order-8 | 8 |
| order-9 | 9 |
| order-10 | 10 |
| order-11 | 11 |
| order-12 | 12 |