In dit artikel wordt de methode uitgelegd om te voorkomen dat flex-items in Tailwind CSS worden ingepakt.
Hoe te voorkomen/stoppen dat flexibele artikelen in Tailwind worden gewikkeld?
Maak een HTML-bestand om te voorkomen dat flexitems in Tailwind worden ingepakt. Gebruik vervolgens het hulpprogramma 'flex-nowrap' met de flex-container in het HTML-programma om te voorkomen dat flex-items omwikkelen. Zorg vervolgens voor de wijzigingen door de HTML-webpagina te bekijken.
Probeer de onderstaande stappen uit om het beter te begrijpen:
Stap 1: voorkomen dat flexibele items in HTML-programma worden ingepakt
Maak een HTML-programma en gebruik de ' flex-nurap ” hulpprogramma met de gewenste flexcontainer om te voorkomen dat flexartikelen inpakken:
< lichaam >
< div klas = 'flex flex-nowrap h-40' >
< div klas = 'basis-1/4 bg-rood-500 m-1' > 1 < / div >
< div klas = 'basis-1/3 bg-geel-500 m-1' > 2 < / div >
< div klas = 'basis-1/2 bg-groenblauw-500 m-1' > 3 < / div >
< / div >
< / lichaam >
Hier:
- “ buigen ” class maakt flexbox-lay-out mogelijk op de element en maakt het mogelijk de onderliggende elementen te rangschikken en uit te lijnen.
- “ flex-nurap ” klasse geeft aan dat de flex-items niet op meerdere regels moeten worden teruggevouwen en alle flex-items op één regel moeten houden.
- De ' basis-1/4 ”, “ basis-1/3 ', En ' basis-1/2 'klassen bepalen het innerlijk
s breedte tot respectievelijk 25%, 33,33% en 50% van hun bovenliggende elementen.
Stap 2: uitvoer controleren
Bekijk de HTML-webpagina om er zeker van te zijn dat de flex-items niet zijn ingepakt:
Op de bovenstaande webpagina staan de flexartikelen op één regel en zijn ze niet ingepakt.
Conclusie
Gebruik het hulpprogramma 'flex-nowrap' met de gewenste flexcontainer in het HTML-programma om te voorkomen dat flexitems in Tailwind worden ingepakt. Dit hulpprogramma voorkomt dat de flexibele artikelen worden ingepakt. Bekijk ter verificatie de wijzigingen op de webpagina. Dit artikel heeft de methode geïllustreerd om te voorkomen dat flex-items in Tailwind CSS worden ingepakt.