Coloque a propriedade de conteúdo no Tailwind CSS
A propriedade de conteúdo de local do Tailwind permite alinhar e distribuir itens rapidamente em um contêiner.
Neste artigo, veremos mais de perto o conteúdo de local do Tailwind e como ele pode ser usado para criar designs atraentes e funcionais.
- Coloque a propriedade de conteúdo no Tailwind CSS:
- O que é conteúdo do Tailwind Place?:
- Classes de conteúdo do Tailwind Place:
- Centro de conteúdo do Tailwind Place:
- Início do conteúdo do Tailwind Place:
- Final do conteúdo do Tailwind:
- Tailwind Coloque o conteúdo entre:
- Conteúdo do Tailwind:
- Conteúdo Tailwind uniformemente:
- Linha de base do conteúdo do Tailwind Place:
- Alongamento de conteúdo do Tailwind Place:
O que é conteúdo do Tailwind Place?
O conteúdo do local Tailwind fornece uma maneira conveniente de alinhar e justificar o conteúdo horizontal e vertical de um elemento.
Ele combina as propriedades de alinhar conteúdo e justificar conteúdo em uma única declaração.
Com esta classe, você pode posicionar facilmente o conteúdo de um elemento no centro de seu contêiner ou distribuí-lo uniformemente pelo espaço disponível, tanto na horizontal quanto na vertical.
Classes de conteúdo do Tailwind Place
A propriedade de conteúdo de local do Tailwind inclui uma ampla variedade de classes que permitem controlar o alinhamento e a distribuição de itens em um contêiner.
Essas opções incluem:
| Aulas | Visão geral |
| lugar-centro-conteúdo | Essa classe é usada para centralizar o conteúdo de um elemento horizontal e verticalmente. |
| lugar-conteúdo-início | Ele é usado para alinhar itens de grade ou flex ao início do contêiner ao longo dos eixos horizontal e vertical. |
| lugar-conteúdo-fim | Essa classe é usada para alinhar itens de grade ou flex ao final do contêiner ao longo dos eixos horizontal e vertical. |
| lugar-conteúdo-entre | Usando esta classe, o primeiro item posicionado na borda inicial e o último item posicionado na borda final. Os itens restantes são espaçados uniformemente. |
| coloque-conteúdo-ao redor | Os itens da grade serão espaçados com espaços iguais entre eles, e o espaço restante será distribuído uniformemente entre o primeiro e o último itens. |
| coloque-conteúdo-uniformemente | A grade ou os itens flexíveis serão espaçados com espaços iguais entre eles, e o espaço entre cada item também será igual ao espaço entre o item e a borda do contêiner. |
| linha de base do conteúdo do local | Os itens da grade serão posicionados de forma que a linha de base do texto de cada item fique alinhada com a linha de base do texto dos outros itens. |
| Place-content-stretch | Usado para esticar os itens da grade para preencher todo o contêiner da grade ao longo dos eixos horizontal e vertical. |
Centro de conteúdo do Tailwind Place
Essa classe é usada para centralizar horizontal e verticalmente o conteúdo de um elemento.
Essa classe define as propriedades align-content e align-content para centralizar o conteúdo horizontal e verticalmente dentro do elemento.
Sintaxe
<element class="place-content-center">...</element>
Para usar a classe place-content-center do Tailwind em suas páginas da Web, você precisa adicioná-la ao elemento container no qual deseja alinhar e distribuir itens.
Este exemplo demonstra a classe place-content-center no Tailwind:
Example:
Tailwind Coloque o início do conteúdo
O objetivo desta classe é alinhar grade ou itens flexíveis ao início do contêiner ao longo dos eixos horizontal e vertical.
Isso garante que os itens sejam posicionados no canto superior esquerdo do contêiner, sem espaçamento ou alinhamento adicional aplicado.
Sintaxe
<element class="place-content-start">...</element>
O exemplo abaixo é usado para uma ilustração da classe place-content-start no Tailwind:
Example:
Tailwind Colocar Fim do Conteúdo
Essa classe é utilizada para alinhar itens de grade ou flex ao final do contêiner ao longo dos eixos horizontal e vertical.
Isso significa que os itens serão posicionados no canto inferior direito do contêiner, sem espaçamento ou alinhamento adicional aplicado.
Sintaxe
<element class="place-content-end">...</element>
Vamos explorar a classe place-content-end no Tailwind por meio de um exemplo:
Example:
Tailwind Colocar conteúdo entre
Essa classe é usada para distribuir uniformemente a grade ou flex itens ao longo do eixo principal, mantendo espaçamento igual entre os itens.
Isso significa que o primeiro item será posicionado no início do contêiner, o último item será posicionado no final do contêiner e os itens restantes serão espaçados uniformemente entre eles.
Sintaxe
<element class="place-content-between">...</element>
O exemplo a seguir gira em torno da classe place-content-between no Tailwind:
Example:
Tailwind Colocar conteúdo ao redor
Essa classe é usada para distribuir a grade ou flex itens uniformemente no contêiner ao longo dos eixos horizontal e vertical.
Isso significa que os itens serão espaçados com espaços iguais entre eles, e o espaço restante será distribuído uniformemente entre o primeiro e o último itens.
Sintaxe
<element class="place-content-around">...</element>
O exemplo a seguir fornece uma breve visão geral da classe place-content-around no Tailwind:
Example:
Conteúdo do Tailwind uniformemente
O objetivo desta classe é distribuir uniformemente a grade ou os itens flexíveis no contêiner ao longo dos eixos horizontal e vertical.
Isso cria espaçamento igual entre cada item e as bordas do contêiner, bem como entre cada item.
Sintaxe
<element class="place-content-evenly">...</element>
O exemplo abaixo facilita a compreensão do conceito de classe place-content-evenly no Tailwind:
Example:
Linha de base do conteúdo do Tailwind Place
Essa classe é usada para alinhar as linhas de base da grade ou itens flexíveis com a linha de base do contêiner ao longo dos eixos horizontal e vertical.
Isso significa que a linha de base do texto de cada item será alinhada com a linha de base do texto dos outros itens
Sintaxe
<element class="place-content-baseline">...</element>
O exemplo a seguir mostra uma implementação da classe place-content-baseline no Tailwind:
Example:
Alongamento de conteúdo do Tailwind
Essa classe garante que a grade ou os itens flexíveis sejam expandidos para preencher todo o contêiner ao longo dos eixos horizontal e vertical.
Isso significa que os itens serão esticados para ocupar todo o espaço disponível no contêiner, independentemente do tamanho original, e preencherão o contêiner sem nenhum espaçamento ou alinhamento adicional aplicado.
Sintaxe
<element class="place-content-stretch">...</element>
A classe place-content-stretch é demonstrada no exemplo abaixo:
