Cet article illustrera la méthode pour empêcher les éléments flexibles de croître ou de rétrécir dans Tailwind CSS.
Comment empêcher les éléments flexibles de grossir ou de rétrécir dans Tailwind ?
Pour empêcher les éléments flexibles d'augmenter et de diminuer dans Tailwind, créez le fichier HTML. Ensuite, utilisez le ' flex-croissance-0 ' et ' flex-rétractable-0 ” utilitaires avec les éléments flex spécifiques dans le programme HTML. Ces utilitaires ne permettent pas aux éléments flexibles d'augmenter ou de diminuer en fonction de l'espace dans le conteneur flexible. Après cela, ajustez la taille de l'écran de la page Web HTML pour assurer les changements.
Suivez les étapes fournies pour sa mise en œuvre pratique :
Étape 1 : Empêcher la croissance et la diminution des éléments flexibles dans le programme HTML
Faites un programme HTML et utilisez le ' flex-croissance-0 ' et ' flex-rétractable-0 ” utilitaires avec les éléments flexibles souhaités pour les empêcher de croître ou de rétrécir :
< corps >
< div classe = 'flex h-20' >
< div classe = 'flex-grow-0 bg-jaune-500 w-40 m-1' > 1 < / div >
< div classe = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div classe = 'flex-grow bg-sarcelle-500 w-40 m-1' > 3 < / div >
< div classe = 'flex-rétractable bg-rouge-500 w-40 m-1' > 4 < / div >
< / div >
< / corps >
Ici:
- ' flex-croissance-0 ” empêche l'élément flexible de grandir et de prendre de l'espace supplémentaire dans le conteneur flexible lorsque l'espace est disponible.
- ' flex-rétractable-0 ” empêche l'élément flexible de rétrécir et de se réduire dans le conteneur flexible lorsque l'espace est insuffisant.
- ' flex-croissance ” permet à l'élément flexible de croître et d'occuper l'espace disponible dans le conteneur flexible.
- ' flex-rétractable ” permet à l'élément flexible de se réduire s'il n'y a pas assez d'espace dans le conteneur flexible.
Étape 2 : vérifier la sortie
Affichez la page Web HTML et modifiez la taille de l'écran pour vous assurer que les éléments flexibles souhaités n'ont pas été agrandis ni réduits :
La sortie ci-dessus montre que l'élément flexible '2' ne rétrécit pas dans un espace insuffisant et que l'élément '1' ne grandit pas dans l'espace disponible. Cela indique que les éléments flexibles souhaités ont été empêchés de croître et de rétrécir.
Conclusion
Pour empêcher les éléments flexibles de croître et de rétrécir dans Tailwind, utilisez le ' flex-croissance-0 ' et ' flex-rétractable-0 ” utilitaires avec les éléments flexibles souhaités dans le programme HTML. Pour vérification, modifiez et affichez la taille de l'écran de la page Web HTML. Cet article a illustré la méthode pour empêcher les éléments flexibles de croître ou de rétrécir dans Tailwind CSS.