Alinhar-se no Tailwind CSS
Neste artigo, exploraremos o que é Tailwind align self , como ele funciona e como usá-lo efetivamente em seus projetos de desenvolvimento web.
A classe align-self no Tailwind CSS fornece uma maneira rápida e fácil de definir a propriedade align-self.
O alinhamento automático do Tailwind alinha um item flexível individual ao longo do eixo cruzado (eixo vertical) de um contêiner flexível.
O alinhamento automático do Tailwind permite especificar o alinhamento vertical de um item flexível em conjunto com um contêiner flexível.
Tailwind Align Self: como funciona?
A propriedade align-self pode ser atribuída a qualquer item flexível, como um div ou uma imagem.
Essa propriedade determina como um item flexível é alinhado verticalmente em um contêiner flexível.
Quando um contêiner é definido para exibir: flex e flex-direction: row, a propriedade align-self pode ser usada para alinhar itens flexíveis verticalmente.
Tailwind CSS oferece suporte aos seguintes valores de alinhamento automático:
- auto – Este valor permite que o contêiner flexível decida como o item flexível deve ser alinhado.
- start – Posiciona o item flexível no início do eixo transversal.
- End – Posiciona o item flexível na extremidade do eixo cruzado.
- Centro – Alinha o item flexível no centro do eixo cruzado.
- baseline – define a linha de base do item flexível para a linha de base do contêiner flexível.
- Esticar – Preenche o contêiner até a altura total do item flexível.
Tailwind Alinhamento Automático
Align-auto herda a propriedade align-items de seu contêiner pai.
Ele herda estendido como um valor padrão se não tiver um contêiner pai.
Sintaxe:
<element class="self-auto">...</element>
Você pode atribuir a classe align-self a qualquer item flexível dentro de um flex container combinando a palavra-chave align-self com o valor desejado:
Example:
Tailwind Alinhar auto-inicialização
Quando usado com um flex container, align-self-start alinha um flex item ao topo do eixo transversal.
Texto, imagens e outros elementos podem ser alinhados na parte superior de um contêiner quando o alinhamento padrão não é o preferido.
Sintaxe:
<element class="self-start">...</element>
Itens flexíveis podem ser alinhados ao topo de um contêiner adicionando a classe align-self-start:
Example:
Tailwind Alinhar Auto-fim
Uma propriedade align-self-end alinha um item flexível ao final do eixo cruzado de um contêiner flexível.
Sintaxe:
<element class="self-end">...</element>
Os itens flexíveis aparecerão na direção flexível da coluna na parte inferior do contêiner ou na direção flexível da linha à direita do contêiner:
Example:
Tailwind Alinhar o autocentro
A propriedade align-self-center alinha um item flexível verticalmente no centro do contêiner.
Dentro de um contêiner, você pode centralizar texto, imagens e outros elementos usando esse recurso.
Sintaxe:
<element class="self-center">...</element>
Você pode alinhar flex items ao centro de um container adicionando a classe align-self-center :
Example:
Tailwind Alinhar a linha de base automática
Ao definir a propriedade align-self como linha de base, a propriedade align-self de um item se alinha com a linha de base de um contêiner flexível.
Sintaxe:
<element class="self-baseline">...</element>
Você pode usar isso se quiser alinhar itens com diferentes tamanhos de fonte e alturas de linha ao longo de uma linha de base comum.
Example:
Tailwind Alinhar auto-estiramento
Uma propriedade de auto-alongamento de alinhamento estica os itens flexíveis no eixo cruzado até sua altura total.
É especialmente útil quando os elementos HTML , como imagens e entradas de formulário , precisam preencher toda a altura do contêiner .
Sintaxe:
<element class="self-stretch">...</element>
Para esticar um item flexível até a altura total do contêiner, adicione a classe align-self-stretch :
Example:
