Denne artikkelen vil forklare metoden for å forhindre at flex-elementer pakkes inn i Tailwind CSS.
Hvordan forhindre/stoppe Flex-gjenstander fra å pakkes inn i medvind?
For å stoppe flex-elementer fra å pakkes inn i Tailwind, lag en HTML-fil. Bruk deretter 'flex-nowrap'-verktøyet med flex-beholderen i HTML-programmet for å forhindre at flex-elementer pakkes inn. Deretter sikrer du endringene ved å se HTML-nettsiden.
Prøv trinnene nedenfor for å forstå det bedre:
Trinn 1: Hindre Flex-elementer fra å pakkes inn i HTML-program
Lag et HTML-program og bruk ' flex-nowrap ”-verktøy med ønsket flex-beholder for å forhindre at flex-elementer pakkes inn:
< kropp >
< 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 >
< / kropp >
Her:
- ' bøye seg ”-klassen muliggjør flexbox-layout på element og tillater at de underordnede elementene kan ordnes og justeres.
- ' flex-nowrap ” klasse spesifiserer at flex-elementene ikke skal pakkes inn på flere linjer og holde alle flex-elementer på en enkelt linje.
- « basis-1/4 ', ' basis-1/3 ', og ' basis-1/2 ” klasser setter det indre
's bredde til henholdsvis 25 %, 33,33 % og 50 % av overordnede elementer.
Trinn 2: Bekreft utdata
For å sikre at flex-elementene ikke er pakket inn, se HTML-nettsiden:
På nettsiden ovenfor er flex-varene på en enkelt linje og har ikke blitt pakket inn.
Konklusjon
For å forhindre at flex-elementer pakkes inn i Tailwind, bruk 'flex-nowrap'-verktøyet med ønsket flex-beholder i HTML-programmet. Dette verktøyet forhindrer at flex-elementene pakkes inn. For verifisering, se endringene på nettsiden. Denne artikkelen har illustrert metoden for å forhindre at flex-elementer pakkes inn i Tailwind CSS.