Envoltório flexível de vento de cauda
Discutiremos o Tailwind Flex Wrap neste artigo e como ele pode ser usado para criar designs flexíveis e responsivos.
A classe flex-wrap no Tailwind CSS permite que você gerencie como os itens dentro de um contêiner Flexbox são agrupados quando não há espaço suficiente para encaixá-los em uma linha.
Por padrão, os itens do Flexbox são dispostos em uma única linha e podem transbordar o contêiner se não houver espaço suficiente para acomodá-los.
Aulas de Flex Wrap Tailwind
Existem três classes utilitárias para controlar o comportamento de empacotamento de contêineres flexíveis.
| Aulas | Visão geral |
| envoltório flexível | Esta classe define a propriedade flex-wrap de um flex container para envolver |
| flex-nowrap | Esta classe define a propriedade flex-wrap de um flex container para nowrap |
| flex-wrap-reverse | Esta classe define a propriedade flex-wrap de um flex container para wrap-reverse |
Envoltório flexível de vento de cauda
Essa classe permite que os itens sejam encapsulados em várias linhas conforme necessário, para evitar que transbordem o contêiner.
Sintaxe
<element class="flex flex-wrap"> Contents....</element>
Neste exemplo, passamos por uma implementação prática da classe flex-wrap no Tailwind:
Example:
Tailwind flex-nowrap
Esse valor garante que todos os itens sejam colocados em uma única linha, mesmo que isso os faça transbordar do contêiner.
Sintaxe
<element class="flex flex-nowrap"> Contents....</element>
No exemplo a seguir, o uso do flex-nowrap é demonstrado para melhor entendimento:
Example:
Tailwind flex-wrap-reverse
Ele agrupa os itens em várias linhas, mas na ordem inversa . Portanto, se os itens foram originalmente dispostos em linhas da esquerda para a direita, eles agora serão dispostos em colunas de baixo para cima.
Sintaxe
<element class="flex flex-wrap-reverse"> Contents....</element>
Este exemplo fornece uma demonstração prática de como usar a classe flex-wrap-reverse no Tailwind CSS :
