Tento článok vysvetlí spôsob, ako zabrániť zalamovaniu flexibilných položiek v CSS Tailwind.
Ako zabrániť/zastaviť balenie položiek Flex v systéme Tailwind?
Ak chcete zastaviť zalamovanie flexibilných položiek v Tailwinde, vytvorte súbor HTML. Potom použite pomôcku „flex-nowrap“ s kontajnerom flex v programe HTML, aby ste zabránili zabaleniu flexibilných položiek. Potom zaistite zmeny zobrazením webovej stránky HTML.
Vyskúšajte nižšie uvedené kroky, aby ste tomu lepšie porozumeli:
Krok 1: Zabráňte zabaleniu položiek Flex do programu HTML
Vytvorte HTML program a použite „ flex-nowrap ” pomôcka s požadovanou ohybnou nádobou na zabránenie omotania ohybných predmetov:
< telo >
< div trieda = 'flex flex-nowrap h-40' >
< div trieda = 'základ-1/4 bg-červená-500 m-1' > 1 < / div >
< div trieda = 'základ-1/3 bg-žltá-500 m-1' > 2 < / div >
< div trieda = 'základ-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / telo >
Tu:
- “ flex ” umožňuje rozloženie flexboxu na a umožňuje, aby boli podradené prvky usporiadané a zarovnané.
- “ flex-nowrap ” trieda špecifikuje, že flexibilné položky by sa nemali zabaliť do viacerých riadkov a všetky flexibilné položky by mali držať v jednom riadku.
- ' základ-1/4 “, “ základ-1/3 “ a „ základ-1/2 “ triedy nastaviť vnútorné
šírky na 25 %, 33,33 % a 50 % ich rodičovských prvkov.
Krok 2: Overte výstup
Aby ste sa uistili, že flexibilné položky neboli zabalené, pozrite si webovú stránku HTML:
Na vyššie uvedenej webovej stránke sú flexibilné položky v jednom riadku a neboli zabalené.
Záver
Ak chcete zabrániť zabaľovaniu flexibilných položiek v Tailwinde, použite nástroj „flex-nowrap“ s požadovaným kontajnerom Flex v programe HTML. Táto pomôcka zabraňuje zbaleniu ohybných predmetov. Pre overenie si pozrite zmeny na webovej stránke. Tento článok ilustruje spôsob, ako zabrániť zalamovaniu flexibilných položiek v CSS Tailwind.