Denne artikel vil forklare metoden til at forhindre flex-elementer i at pakkes ind i Tailwind CSS.
Hvordan forhindrer/stopper man Flex-genstande i at pakke sig ind i medvind?
For at forhindre flex-elementer i at ombrydes i Tailwind, lav en HTML-fil. Brug derefter 'flex-nowrap'-værktøjet med flex-beholderen i HTML-programmet for at forhindre flex-elementer i at pakkes ind. Derefter skal du sikre dig ændringerne ved at se HTML-websiden.
Prøv nedenstående trin for at forstå det bedre:
Trin 1: Forhindrer, at Flex-elementer pakkes ind i HTML-program
Lav et HTML-program og brug ' flex-nowrap ”-værktøj med den ønskede flex-beholder for at forhindre flex-emner i at pakke:
< legeme >
< div klasse = 'flex flex-nowrap h-40' >
< div klasse = 'basis-1/4 bg-rød-500 m-1' > 1 < / div >
< div klasse = 'basis-1/3 bg-gul-500 m-1' > 2 < / div >
< div klasse = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / legeme >
Her:
- “ bøje ” klasse muliggør flexbox layout på element og tillader, at de underordnede elementer kan arrangeres og justeres.
- “ flex-nowrap ” klasse angiver, at flex-elementerne ikke skal ombrydes på flere linjer og holde alle flex-elementer på en enkelt linje.
- Det ' basis-1/4 ', ' basis-1/3 ', og ' basis-1/2 ” klasser sætter det indre
's bredde til henholdsvis 25 %, 33,33 % og 50 % af deres overordnede elementer.
Trin 2: Bekræft output
For at sikre, at flex-elementerne ikke er blevet pakket ind, skal du se HTML-websiden:
På ovenstående webside er flex-varerne i en enkelt linje og er ikke blevet pakket ind.
Konklusion
For at forhindre flex-elementer i at pakkes ind i Tailwind, skal du bruge 'flex-nowrap'-værktøjet med den ønskede flex-beholder i HTML-programmet. Dette værktøj forhindrer flex-emnerne i at pakke sig ind. For verifikation, se ændringerne på websiden. Denne artikel har illustreret metoden til at forhindre flex-emner i at pakkes ind i Tailwind CSS.