Este artigo exemplificará o método para impedir que os itens flexíveis cresçam ou diminuam no Tailwind CSS.
Como evitar que os itens flexíveis cresçam ou diminuam no Tailwind?
Para evitar que os itens flexíveis cresçam e diminuam no Tailwind, crie o arquivo HTML. Em seguida, utilize o “ flex-grow-0 ' e ' flex-shrink-0 ” utilitários com os itens flexíveis específicos no programa HTML. Esses utilitários não permitem que os itens flexíveis cresçam ou diminuam de acordo com o espaço dentro do contêiner flexível. Depois disso, ajuste o tamanho da tela da página da Web HTML para garantir as alterações.
Siga as etapas fornecidas para sua implementação prática:
Etapa 1: impedir que os itens flexíveis cresçam e diminuam no programa HTML
Faça um programa HTML e use o “ flex-grow-0 ' e ' flex-shrink-0 ” utilitários com os itens flexíveis desejados para evitar que eles cresçam ou diminuam:
< corpo >
< div aula = 'flex h-20' >
< div aula = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div aula = 'flex-shrink-0 bg-fúcsia-500 w-40 m-1' > 2 < / div >
< div aula = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div aula = 'flex-shrink bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / corpo >
Aqui:
- “ flex-grow-0 ” evita que o item flexível cresça e ocupe espaço extra dentro do contêiner flexível quando houver espaço disponível.
- “ flex-shrink-0 ” evita que o item flexível encolha e reduza dentro do contêiner flexível quando o espaço é insuficiente.
- “ flex-crescimento ” permite que o flex item cresça e ocupe o espaço disponível dentro do flex container.
- “ flexionar ” permite que o item flexível diminua se não houver espaço suficiente no contêiner flexível.
Etapa 2: verificar a saída
Visualize a página da Web HTML e altere o tamanho da tela para garantir que os itens flexíveis desejados sejam impedidos de crescer e encolher:
A saída acima mostra que o item flexível “2” não está diminuindo no espaço insuficiente e o item “1” não está crescendo no espaço disponível. Isso indica que os itens flexíveis desejados foram impedidos de crescer e encolher.
Conclusão
Para evitar que os itens flexíveis cresçam e diminuam no Tailwind, use o comando “ flex-grow-0 ' e ' flex-shrink-0 ” utilitários com os itens flexíveis desejados no programa HTML. Para verificação, altere e exiba o tamanho da tela da página da Web em HTML. Este artigo exemplificou o método para evitar que os itens flexíveis cresçam ou diminuam no Tailwind CSS.