Tailwind Justificando a Si Mesmo
Neste artigo, exploraremos as diferentes maneiras de usar a propriedade self-justify do Tailwind para posicionar e alinhar itens em uma página da Web.
Tailwind CSS tem muitas propriedades úteis para alinhar elementos dentro de um layout, e uma dessas propriedades é justificar-se.
Esta é uma propriedade usada para alinhar um item de grade individual ao longo do eixo horizontal dentro de sua célula de grade.
Ele é usado para controlar o autoalinhamento de um item de grade individual.
Tailwind justifica autoclasses
| Aulas | Visão geral |
| justifique-auto-auto | Este é o valor padrão. O item da grade é colocado no centro da célula e o espaço restante é distribuído igualmente em ambos os lados. |
| justificar-auto-iniciar | O item da grade é alinhado no início da célula, no lado esquerdo. |
| justificar-auto-fim | O item da grade é alinhado à direita do contêiner, no final da célula. |
| justificar-auto-centramento | O item da grade é centralizado horizontalmente dentro da célula. |
| justifique-auto-extensão | Nesse caso, o item da grade é esticado para preencher toda a largura da célula. |
Justificar Automático
A classe de justificação automática do Tailwind define o valor padrão de justificação automática para itens de grade dentro de um contêiner de grade como automático.
Isso significa que o item herdará seu alinhamento horizontal da propriedade de justificar itens do contêiner de grade.
Sintaxe
<element class="justify-self-auto">...</element>
Neste exemplo, vamos desviar nossa atenção para a classe justificar-auto-auto no Tailwind:
Example:
Justificar o auto-início
A classe de início automático justificado do Tailwind alinha um item de grade à borda inicial do eixo da coluna da grade dentro de um contêiner de grade.
Isso significa que o item será posicionado no lado esquerdo de sua célula da grade, deixando qualquer espaço restante no lado direito da célula.
Sintaxe
<element class="justify-self-start">...</element>
Agora, vamos dar uma olhada mais de perto em justificar o início por meio de um exemplo:
Example:
Justificar o próprio fim
A classe de fim automático justificado do Tailwind alinha um item de grade ao final do eixo da coluna da grade dentro de um contêiner de grade.
Isso significa que o item será posicionado no lado direito de sua célula da grade, deixando qualquer espaço restante no lado esquerdo.
Sintaxe
<element class=”justify-self-end”>…</element>
Este exemplo aumentará sua compreensão sobre a classe de justificação automática no Tailwind:
Example:
Justificar o Autocentramento
A classe de utilitário justificar-autocentrar no Tailwind centraliza horizontalmente um item de grade em sua célula de grade ao longo do eixo da coluna da grade.
Isso resulta no posicionamento do item no centro de sua célula com espaço igual em ambos os lados.
Sintaxe
<element class="justify-self-center">...</element>
O exemplo a seguir demonstra a aplicação da classe justificar-autocentrado no Tailwind:
Example:
O vento de cauda justifica o auto-alongamento
A classe de utilitário justificar-auto-alongar no Tailwind estica um item de grade dentro de sua célula de grade para preencher toda a largura da coluna .
Isso significa que o item será esticado até a largura de sua célula de grade, o que pode ser útil ao tentar criar um layout uniforme onde todos os itens tenham a mesma largura.
Sintaxe
<element class="justify-self-stretch">...</element>
O exemplo abaixo ilustra o uso da classe de justificação automática no Tailwind:
