Flexbox
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Flex Display
Utilitários para criar containers flex
| Classe | Propriedades |
|---|---|
.z--flex | display: flex; |
.z--inline-flex | display: inline-flex; |
Referências:
Flex Direction
Utilitários para controlar a direção dos itens flex
| Classe | Propriedades |
|---|---|
.z--flex-row | flex-direction: row; |
.z--flex-row-reverse | flex-direction: row-reverse; |
.z--flex-col | flex-direction: column; |
.z--flex-col-reverse | flex-direction: column-reverse; |
Referências:
Flex Wrapping
Utilitários para controlar como os itens flex são quebrados
| Classe | Propriedades |
|---|---|
.z--flex-no-wrap | flex-wrap: nowrap; |
.z--flex-wrap | flex-wrap: wrap; |
.z--flex-wrap-reverse | flex-wrap: wrap-reverse; |
Referências:
Align Items
Utilitários para controlar como os itens flexíveis são posicionados ao longo do eixo transversal de um container
| Classe | Propriedades |
|---|---|
.z--items-stretch | align-items: stretch; |
.z--items-start | align-items: flex-start; |
.z--items-center | align-items: center; |
.z--items-end | align-items: flex-end; |
.z--items-baseline | align-items: baseline; |
Referências:
Align Content
Utilitários para controlar como as linhas são posicionadas em containers flexíveis de várias linhas
| Classe | Propriedades |
|---|---|
.z--content-start | align-content: flex-start; |
.z--content-center | align-content: center; |
.z--content-end | align-content: flex-end; |
.z--content-between | align-content: space-between; |
.z--content-around | align-content: space-around; |
Referências:
Align Self
Utilitários para controlar como um item flexível individual é posicionado ao longo do eixo transversal do container
| Classe | Propriedades |
|---|---|
.z--self-auto | align-self: auto; |
.z--self-start | align-self: flex-start; |
.z--self-center | align-self: center; |
.z--self-end | align-self: flex-end; |
.z--self-stretch | align-self: stretch; |
Referências:
Justify Content
Utilitários para controlar como os itens flex são posicionados ao longo do eixo principal de um container
| Classe | Propriedades |
|---|---|
.z--justify-start | justify-content: flex-start; |
.z--justify-center | justify-content: center; |
.z--justify-end | justify-content: flex-end; |
.z--justify-between | justify-content: space-between; |
.z--justify-around | justify-content: space-around; |
Referências:
Flex, Grow, & Shrink
Utilitários para controlar como os itens flex aumentam e diminuem
| Classe | Propriedades |
|---|---|
.z--flex-initial | flex: initial; |
.z--flex-1 | flex: 1; |
.z--flex-auto | flex: auto; |
.z--flex-none | flex: none; |
.z--flex-grow | flex-grow: 1; |
.z--flex-shrink | flex-shrink: 1; |
.z--flex-no-grow | flex-grow: 0; |
.z--flex-no-shrink | flex-shrink: 0; |
Referências: