Utilitário
Flexbox
Classes para criar layouts flexíveis e alinhar conteúdo em duas dimensões.
Container
| Classe CSS | Descrição |
|---|---|
.flex | display: flex; |
.inline-flex | display: inline-flex; |
.flex-wrap | flex-wrap: wrap; |
.flex-nowrap | flex-wrap: nowrap; |
.flex-column | flex-direction: column; |
.flex-column-reverse | flex-direction: column-reverse; |
.flex-row | flex-direction: row; |
.flex-row-reverse | flex-direction: row-reverse; |
.flex-center | justify-content: center; align-items: center; |
Responsivo: adicione o sufixo
@{breakpoint} à classe — por exemplo,
.flex@md.
Flex items
| Classe CSS | Descrição |
|---|---|
.flex-grow | flex-grow: 1; |
.flex-grow-0 | flex-grow: 0; |
.flex-shrink | flex-shrink: 1; |
.flex-shrink-0 | flex-shrink: 0; |
.flex-basis-0 | flex-basis: 0; |
Responsivo: as classes de flex items também aceitam o
sufixo @{breakpoint} — por exemplo,
.flex-grow@md.