Alinhar itens no Tailwind CSS
Nosso objetivo neste artigo é examinar os itens Tailwind Align e como eles podem ser usados para alinhar itens verticalmente em contêineres flexíveis.
Antes de mergulharmos no Tailwind Align Items, vamos dedicar um momento para entender como o Flexbox funciona.
Existem dois eixos principais em um contêiner flexível – o eixo principal e o eixo transversal. O layout é determinado pelo eixo principal, que pode ser horizontal (em linha) ou vertical (em coluna). O eixo transversal é perpendicular.
Os itens flexíveis podem ser alinhados ao longo dos eixos principal e cruzado. As propriedades align-items e align-self controlam o alinhamento ao longo do eixo cruzado, enquanto que a justificação do conteúdo controla o alinhamento ao longo do eixo principal.
Itens de Alinhamento do Tailwind
Em Tailwind Align Items, várias classes CSS permitem o alinhamento de itens ao longo do eixo cruzado.
Esta classe permite que os itens dentro de um contêiner flexível ou em uma determinada janela sejam alinhados.
Ao usar a propriedade align-items, você pode alinhar itens no eixo cruzado de um contêiner flexível.
Itens Css do Tailwind
Aqui estão os itens disponíveis no Tailwind CSS:
- Items-start – alinha os itens no início do contêiner.
- Items-center – centraliza os itens verticalmente no contêiner.
- Items-end – alinha os itens no final do contêiner.
- Items-baseline – alinha os itens com suas linhas de base.
- Items-stretch – Estica itens para preencher o contêiner verticalmente.
Como funcionam esses utilitários? Vamos examinar cada um de perto.
Itens-início
Os itens flexíveis são alinhados no início do contêiner ao longo do eixo cruzado .
A propriedade align-items é definida como flex-start.
Sintaxe
<element class="items-start">...</element>
Example:
Centro de itens
A propriedade items-center flexiona os itens verticalmente no contêiner ao longo do eixo cruzado .
Isso é semelhante a usar a propriedade align-items para centralizar .
Sintaxe:
<element class="items-center">...</element>
Os itens devem ser posicionados verticalmente no centro do recipiente:
Example:
Fim de itens
A propriedade items-end no Tailwind CSS é definida para alinhar os itens flexíveis no final do contêiner ao longo do eixo cruzado .
Isso é o mesmo que usar a propriedade align-items com flex-end.
Sintaxe:
<element class="items-end">...</element>
Example:
Linha de base de itens
Os itens flexíveis são alinhados em suas linhas de base com items-baseline .
É o mesmo que usar baseline-align-items.
Sintaxe:
<element class="items-baseline">...</element>
Os itens serão colocados ao longo da linha de base do contêiner:
Example:
alongamento de itens
A propriedade items-stretch é definida para esticar itens flexíveis para preencher o contêiner ao longo do eixo cruzado.
Sintaxe:
<element class="items-stretch">...</element>
Os itens são esticados para caber no recipiente:
Example:
Agora você sabe como funciona o Tailwind Align Items .
