Ta članek bo razložil metodo za preprečevanje ovijanja elementov flex v Tailwind CSS.
Kako preprečiti/ustaviti ovijanje predmetov Flex v zadnjem vetru?
Če želite preprečiti ovijanje fleksibilnih elementov v Tailwind, naredite datoteko HTML. Nato uporabite pripomoček »flex-nowrap« z vsebnikom flex v programu HTML, da preprečite ovijanje elementov flex. Nato preverite spremembe tako, da si ogledate spletno stran HTML.
Preizkusite spodaj navedene korake, da boste bolje razumeli:
1. korak: Preprečite zavijanje elementov Flex v programu HTML
Naredite program HTML in uporabite » flex-nowrap ” z želenim vsebnikom flex, da preprečite zavijanje predmetov flex:
< telo >
< div razred = 'flex flex-nowrap h-40' >
< div razred = 'osnova-1/4 bg-rdeča-500 m-1' > 1 < / div >
< div razred = 'osnova-1/3 bg-rumena-500 m-1' > 2 < / div >
< div razred = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / telo >
Tukaj:
- “ flex ” omogoča postavitev flexbox na element in omogoča razporeditev in poravnavo podrejenih elementov.
- “ flex-nowrap ” določa, da se prilagodljivi elementi ne smejo zaviti v več vrstic in naj ostanejo vsi prilagodljivi elementi v eni vrstici.
- ' osnova-1/4 ”, “ osnova-1/3 «, in » osnova-1/2 ” razredov določi notranjo
na 25 %, 33,33 % oziroma 50 % svojih nadrejenih elementov.
2. korak: Preverite izhod
Če želite zagotoviti, da elementi flex niso oviti, si oglejte spletno stran HTML:
Na zgornji spletni strani so elementi flex v eni vrstici in niso oviti.
Zaključek
Če želite preprečiti ovijanje elementov flex v Tailwindu, uporabite pripomoček »flex-nowrap« z želenim vsebnikom flex v programu HTML. Ta pripomoček preprečuje ovijanje elementov flex. Za preverjanje si oglejte spremembe na spletni strani. Ta članek je ponazoril metodo za preprečevanje ovijanja elementov flex v Tailwind CSS.