Encolhimento flexível do vento de cauda
Este artigo se concentrará principalmente na propriedade de redução do Tailwind Flex, juntamente com exemplos.
A classe encolher no Tailwind CSS permite que você controle quanto um elemento deve encolher dentro de um layout Flexbox.
Definindo a propriedade CSS flex-shrink, você pode especificar quanto um elemento deve encolher em relação a seus irmãos quando não há espaço suficiente no contêiner.
O valor da propriedade flex-shrink é um número que representa o fator de redução do elemento.
Classes Flex Shrink do Tailwind
| Aulas | Visão geral |
| encolher-0 | Usando esta classe, você pode definir a propriedade flex-shrink de um item flexível como 0. |
| encolher | Essa classe permite definir a propriedade flex-shrink de um item flexível como 1. |
Tailwind flex-shrink-0
A classe shrink-0 no Tailwind CSS é usada para evitar que um elemento seja reduzido e ocupe menos espaço disponível dentro de um layout Flexbox.
Sintaxe
<element class="flex-shrink-0"> Contents....</element>
Este exemplo demonstra o uso de shrink-0 no Tailwind:
Example:
Tailwind flex-shrink
Isso define o valor de redução como 1, o que significa que os itens flexíveis serão reduzidos proporcionalmente quando não houver espaço suficiente no contêiner.
Sintaxe
<element class="flex-shrink">....</element>
Este exemplo se concentra em explorar a classe encolher no Tailwind:
Example:
