Dit artikel illustreert de methode om te voorkomen dat flex-items groeien of krimpen in Tailwind CSS.
Hoe voorkom je dat flexibele items groeien of krimpen in Tailwind?
Om te voorkomen dat de flex-items in Tailwind groeien en krimpen, maakt u het HTML-bestand. Maak dan gebruik van de “ flex-groei-0 ' En ' flex-krimp-0 ”-hulpprogramma's met de specifieke flex-items in het HTML-programma. Met deze hulpprogramma's kunnen flexitems niet groeien of krimpen in overeenstemming met de ruimte in de flexcontainer. Pas daarna de schermgrootte van de HTML-webpagina aan om voor wijzigingen te zorgen.
Volg de verstrekte stappen voor de praktische implementatie:
Stap 1: voorkomen dat flexibele items groeien en krimpen in het HTML-programma
Maak een HTML-programma en gebruik de ' flex-groei-0 ' En ' flex-krimp-0 ” hulpprogramma's met de gewenste flexartikelen om te voorkomen dat ze groeien of krimpen:
< lichaam >
< div klas = 'flex h-20' >
< div klas = 'flex-grow-0 bg-geel-500 w-40 m-1' > 1 < / div >
< div klas = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div klas = 'flexkweek bg-teal-500 w-40 m-1' > 3 < / div >
< div klas = 'flex-shrink bg-rood-500 w-40 m-1' > 4 < / div >
< / div >
< / lichaam >
Hier:
- “ flex-groei-0 ” class voorkomt dat het flexartikel groeit en extra ruimte inneemt in de flexcontainer wanneer er ruimte beschikbaar is.
- “ flex-krimp-0 ” klasse voorkomt dat het flex-item krimpt en kleiner wordt in de flexcontainer wanneer er onvoldoende ruimte is.
- “ flex-groei Met de klasse kan het flexitem groeien en de beschikbare ruimte binnen de flexcontainer innemen.
- “ flex-krimp ” klasse laat het flex-item krimpen als er niet genoeg ruimte is in de flex-container.
Stap 2: uitvoer verifiëren
Bekijk de HTML-webpagina en wijzig de schermgrootte om ervoor te zorgen dat de gewenste flex-items niet kunnen groeien en krimpen:
De bovenstaande uitvoer laat zien dat het flex-item '2' niet krimpt in onvoldoende ruimte en het item '1' niet groeit in de beschikbare ruimte. Dit geeft aan dat de gewenste flex-items zijn verhinderd om te groeien en te krimpen.
Conclusie
Om te voorkomen dat de flex items groeien en krimpen in Tailwind, gebruik je de flex-groei-0 ' En ' flex-krimp-0 ”-hulpprogramma's met de gewenste flex-items in het HTML-programma. Wijzig en bekijk ter verificatie de schermgrootte van de HTML-webpagina. Dit artikel is een voorbeeld van de methode om te voorkomen dat flexitems groeien of krimpen in Tailwind CSS.