Flexbox
The flexbox utility classes make it easy to align content and create two-dimensional layouts.
| CSS Class | Description |
|---|---|
f{p}lex |
display: flex; |
i{p}nline-flex |
display: inline-flex; |
f{p}lex-wrap |
flex-wrap: wrap; |
f{p}lex-nowrap |
flex-wrap: nowrap; |
f{p}lex-column |
flex-direction: column; |
f{p}lex-column-reverse |
flex-direction: column-reverse; |
f{p}lex-row |
flex-direction: row; |
f{p}lex-row-reverse |
flex-direction: row-reverse; |
f{p}lex-center |
justify-content: center; align-items: center; |
Responsive - target a breakpoint by adding the @{breakpoint} suffix (e.g., .flex@md).
Flex items #
| CSS Class | Description |
|---|---|
f{p}lex-grow |
flex-grow: 1; |
f{p}lex-grow-0 |
flex-grow: 0; |
f{p}lex-shrink |
flex-shrink: 1; |
f{p}lex-shrink-0 |
flex-shrink: 0; |
f{p}lex-basis-0 |
flex-basis: 0; |
Responsive - Edit the flex item classes at specific breakpoints adding the @{breakpoint} suffix (e.g., .flex-grow@md).
