Ez a cikk azt a módszert ismerteti, amellyel megakadályozható, hogy a flexibilis elemek becsomagoljanak a Tailwind CSS-be.
Hogyan lehet megakadályozni/megakadályozni, hogy a Flex tárgyak hátszélben becsomagoljanak?
Ha meg szeretné akadályozni, hogy a flex elemek becsomagoljanak a Tailwindbe, hozzon létre egy HTML-fájlt. Ezután használja a „flex-nowrap” segédprogramot a flex tárolóval a HTML programban, hogy megakadályozza a flex elemek becsomagolását. Ezután ellenőrizze a változtatásokat a HTML weboldal megtekintésével.
Próbálja ki az alábbi lépéseket, hogy jobban megértse:
1. lépés: Akadályozza meg a Flex-elemek becsomagolását a HTML programban
Készíts egy HTML programot, és használd a „ flex-nowrap ” segédprogram a kívánt hajlékony tartállyal, hogy megakadályozza a hajlékony tárgyak becsomagolását:
< test >
< div osztály = 'flex flex-nowrap h-40' >
< div osztály = 'alap-1/4 bg-red-500 m-1' > 1 < / div >
< div osztály = 'alap-1/3 bg-sárga-500 m-1' > 2 < / div >
< div osztály = 'basis-1/2 bg-teal-500 m-1' > 3 < / div >
< / div >
< / test >
Itt:
- ' Flex ” osztály lehetővé teszi a flexbox elrendezést a elemet, és lehetővé teszi a gyermekelemek elrendezését és igazítását.
- ' flex-nowrap ” osztály azt határozza meg, hogy a flex elemeket nem szabad több sorba csomagolni, és az összes rugalmas elemet egyetlen sorban kell tartani.
- A ' alap-1/4 ”, „ alap-1/3 ”, és „ alap-1/2 ” osztályok határozzák meg a belsőt
szélessége a szülőelemek 25%-ára, 33,33%-ára, illetve 50%-ára.
2. lépés: Ellenőrizze a kimenetet
Ha meg szeretné győződni arról, hogy a rugalmas elemek nincsenek becsomagolva, tekintse meg a HTML weboldalt:
A fenti weboldalon a rugalmas elemek egyetlen sorban vannak, és nincsenek becsomagolva.
Következtetés
Ha meg szeretné akadályozni, hogy a flex elemek beburkolódjanak a Tailwindbe, használja a „flex-nowrap” segédprogramot a kívánt rugalmas tárolóval a HTML programban. Ez a segédprogram megakadályozza, hogy a rugalmas elemek becsomagolják. Az ellenőrzéshez tekintse meg a módosításokat a weboldalon. Ez a cikk bemutatja azt a módszert, amellyel megakadályozható, hogy a flexibilis elemek becsomagolják a Tailwind CSS-be.