Este artigo explicará o método para impedir que os itens flexíveis sejam encapsulados no Tailwind CSS.
Como evitar/impedir que os itens flexíveis sejam agrupados no Tailwind?
Para impedir que os itens flexíveis sejam encapsulados no Tailwind, crie um arquivo HTML. Em seguida, use o utilitário “flex-nowrap” com o contêiner flexível no programa HTML para evitar que os itens flexíveis sejam encapsulados. Em seguida, verifique as alterações visualizando a página da Web em HTML.
Experimente os passos abaixo mencionados, para entender melhor:
Etapa 1: impedir que os itens flexíveis sejam agrupados no programa HTML
Faça um programa HTML e use o “ flex-nowrap ” com o contêiner flexível desejado para evitar que os itens flexíveis sejam embalados:
< corpo >
< div aula = 'flex flex-nowrap h-40' >
< div aula = 'base-1/4 bg-vermelho-500 m-1' > 1 < / div >
< div aula = 'base-1/3 bg-amarelo-500 m-1' > 2 < / div >
< div aula = 'base-1/2 bg-petróleo-500 m-1' > 3 < / div >
< / div >
< / corpo >
Aqui:
- “ flex ” permite o layout do flexbox no elemento e permite que os elementos filhos sejam organizados e alinhados.
- “ flex-nowrap ” especifica que os itens flexíveis não devem ser agrupados em várias linhas e manter todos os itens flexíveis em uma única linha.
- O ' base-1/4 ”, “ base-1/3 ', e ' base-1/2 ” classes definem o interior
’s largura para 25%, 33,33% e 50% de seus elementos pais, respectivamente.
Etapa 2: verificar a saída
Para garantir que os itens flexíveis não foram encapsulados, visualize a página da Web em HTML:
Na página da Web acima, os itens flexíveis estão em uma única linha e não foram encapsulados.
Conclusão
Para evitar que os itens flexíveis sejam encapsulados no Tailwind, utilize o utilitário “flex-nowrap” com o contêiner flexível desejado no programa HTML. Este utilitário impede que os itens flexíveis sejam empacotados. Para verificação, visualize as alterações na página da web. Este artigo ilustrou o método para evitar que os itens flexíveis sejam encapsulados no Tailwind CSS.