Tento článek vysvětlí způsob, jak zabránit zalamování flexibilních položek v CSS Tailwind.
Jak zabránit/zastavit balení Flex položek v Tailwindu?
Chcete-li zabránit zalamování flexibilních položek v Tailwindu, vytvořte soubor HTML. Poté použijte nástroj „flex-nowrap“ s kontejnerem flex v programu HTML, abyste zabránili zalamování položek flex. Dále zajistěte změny zobrazením webové stránky HTML.
Vyzkoušejte níže uvedené kroky, abyste tomu lépe porozuměli:
Krok 1: Zabraňte zabalení položek Flex do programu HTML
Vytvořte HTML program a použijte „ flex-nowrap ” nástroj s požadovanou ohebnou nádobou, aby se zabránilo sbalení flexibilních předmětů:
< tělo >
< div třída = 'flex flex-nowrap h-40' >
< div třída = 'základ-1/4 bg-červená-500 m-1' > 1 < / div >
< div třída = 'základ-1/3 bg-žlutá-500 m-1' > 2 < / div >
< div třída = 'základ-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / tělo >
Tady:
- “ flex Třída ” umožňuje rozložení flexboxu na a umožňuje uspořádání a zarovnání podřízených prvků.
- “ flex-nowrap Třída ” určuje, že flexibilní položky by se neměly zabalit do více řádků a všechny flexibilní položky by měly být umístěny na jednom řádku.
- ' základ-1/4 “, “ základ-1/3 ', a ' základ-1/2 ” třídy nastavit vnitřní
šířky na 25 %, 33,33 % a 50 % jejich nadřazených prvků.
Krok 2: Ověřte výstup
Chcete-li se ujistit, že položky Flex nebyly zalomeny, zobrazte webovou stránku HTML:
Na výše uvedené webové stránce jsou flexibilní položky na jednom řádku a nebyly zalomeny.
Závěr
Chcete-li zabránit zalamování flexibilních položek v Tailwindu, použijte nástroj „flex-nowrap“ s požadovaným kontejnerem flex v programu HTML. Tento nástroj zabraňuje omotávání pružných položek. Pro ověření si prohlédněte změny na webové stránce. Tento článek ilustruje metodu, jak zabránit zalamování flexibilních položek v CSS Tailwind.