Controle de Layout com Utilitários Flexbox
O Tailwind CSS oferece classes utilitárias que permitem criar layouts flexíveis e responsivos facilmente utilizando Flexbox. Essas utilidades possibilitam controlar o design e o alinhamento dos elementos dentro de um contêiner.
Definindo Display como Flex
Para definir que um elemento utilize Flexbox em seu layout, utilize a classe flex. Essa classe define a propriedade display como flex.
index.html
Neste exemplo, a classe flex no elemento pai div o torna um contêiner flex, e as divs filhas (flex-1) distribuirão o espaço igualmente.
Controlando a Direção do Flex
As utilidades de direção do flex permitem controlar a direção em que os itens flex são posicionados no contêiner. É possível definir a direção como linha (padrão), coluna, linha invertida ou coluna invertida utilizando as seguintes classes:
| Classe | Descrição |
|---|---|
flex-row | Posiciona os itens em uma linha (padrão). |
flex-col | Posiciona os itens em uma coluna. |
flex-row-reverse | Posiciona os itens em uma linha invertida. |
flex-col-reverse | Posiciona os itens em uma coluna invertida. |
index.html
Neste exemplo, a classe flex-col define a direção do flex como coluna, empilhando os itens verticalmente.
Alinhando Itens Horizontalmente
As utilidades justify-content controlam o alinhamento horizontal dos itens dentro de um contêiner flex. As classes disponíveis são:
| Class | Description |
|---|---|
justify-start | Alinha os itens ao início. |
justify-center | Alinha os itens ao centro. |
justify-end | Alinha os itens ao final. |
justify-between | Distribui os itens uniformemente com espaço entre eles. |
justify-around | Distribui os itens uniformemente com espaço ao redor. |
justify-evenly | Distribui os itens uniformemente com espaço igual ao redor. |
index.html
Neste exemplo, a classe justify-center centraliza os itens horizontalmente dentro do contêiner flex.
Alinhamento Vertical dos Itens
As utilidades de alinhamento de itens controlam o alinhamento vertical dos itens dentro de um contêiner flex. As classes disponíveis são:
| Classe | Descrição |
|---|---|
items-start | Alinha os itens ao início. |
items-center | Alinha os itens ao centro. |
items-end | Alinha os itens ao final. |
items-baseline | Alinha os itens de acordo com a linha de base. |
items-stretch | Estica os itens para preencher o contêiner (padrão). |
index.html
Neste exemplo, a classe items-center centraliza verticalmente os itens dentro do contêiner flex.
Nota
Se estiver procurando por algo específico, siga o link.
1. Qual classe define a propriedade display como flex?
2. Como definir a direção do flex para coluna?
3. Qual classe centraliza horizontalmente os itens em um container flex?
4. Qual utilitário centraliza verticalmente os itens em um container flex?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 3.57Controle de Layout com Utilitários Flexbox
Deslize para mostrar o menu
O Tailwind CSS oferece classes utilitárias que permitem criar layouts flexíveis e responsivos facilmente utilizando Flexbox. Essas utilidades possibilitam controlar o design e o alinhamento dos elementos dentro de um contêiner.
Definindo Display como Flex
Para definir que um elemento utilize Flexbox em seu layout, utilize a classe flex. Essa classe define a propriedade display como flex.
index.html
Neste exemplo, a classe flex no elemento pai div o torna um contêiner flex, e as divs filhas (flex-1) distribuirão o espaço igualmente.
Controlando a Direção do Flex
As utilidades de direção do flex permitem controlar a direção em que os itens flex são posicionados no contêiner. É possível definir a direção como linha (padrão), coluna, linha invertida ou coluna invertida utilizando as seguintes classes:
| Classe | Descrição |
|---|---|
flex-row | Posiciona os itens em uma linha (padrão). |
flex-col | Posiciona os itens em uma coluna. |
flex-row-reverse | Posiciona os itens em uma linha invertida. |
flex-col-reverse | Posiciona os itens em uma coluna invertida. |
index.html
Neste exemplo, a classe flex-col define a direção do flex como coluna, empilhando os itens verticalmente.
Alinhando Itens Horizontalmente
As utilidades justify-content controlam o alinhamento horizontal dos itens dentro de um contêiner flex. As classes disponíveis são:
| Class | Description |
|---|---|
justify-start | Alinha os itens ao início. |
justify-center | Alinha os itens ao centro. |
justify-end | Alinha os itens ao final. |
justify-between | Distribui os itens uniformemente com espaço entre eles. |
justify-around | Distribui os itens uniformemente com espaço ao redor. |
justify-evenly | Distribui os itens uniformemente com espaço igual ao redor. |
index.html
Neste exemplo, a classe justify-center centraliza os itens horizontalmente dentro do contêiner flex.
Alinhamento Vertical dos Itens
As utilidades de alinhamento de itens controlam o alinhamento vertical dos itens dentro de um contêiner flex. As classes disponíveis são:
| Classe | Descrição |
|---|---|
items-start | Alinha os itens ao início. |
items-center | Alinha os itens ao centro. |
items-end | Alinha os itens ao final. |
items-baseline | Alinha os itens de acordo com a linha de base. |
items-stretch | Estica os itens para preencher o contêiner (padrão). |
index.html
Neste exemplo, a classe items-center centraliza verticalmente os itens dentro do contêiner flex.
Nota
Se estiver procurando por algo específico, siga o link.
1. Qual classe define a propriedade display como flex?
2. Como definir a direção do flex para coluna?
3. Qual classe centraliza horizontalmente os itens em um container flex?
4. Qual utilitário centraliza verticalmente os itens em um container flex?
Obrigado pelo seu feedback!
