A mai bemutatóban egy érdekes gyakorlatot nézünk meg a "Rendezés" témakörében a Flexboxban. Megtanulod, hogyan rendezheted át az elemek sorrendjét egy flex konténerben két különböző módon. A CSS osztályokkal , valamint a flex-direction flexbox tulajdonsággal történő megközelítéseket fogjuk használni. Az útmutató végére nemcsak megérteni fogja az elemek sorrendjét, hanem hatékonyan meg is tudja majd valósítani. Lássunk hozzá!
A legfontosabb tanulságok
- A flex elemek sorrendjét a order tulajdonság segítségével változtathatja meg.
- Az elemek sorrendjének alternatív módszere a flex-direction tulajdonság, amellyel megadhatja a sorrendet.
Lépésről lépésre történő útmutatás
Ahhoz, hogy megváltoztassuk a tartalom sorrendjét egy flex konténerben, először létrehozunk egy egyszerű elrendezést. Ehhez vegyünk egy HTML-dokumentumot, amely öt div elemet tartalmaz, amelyeket át szeretnénk rendezni. A div elemekben lévő számok az aktuális sorrendet jelölik 5-től 1-ig.
Az első lépéshez nyissuk meg a HTML-fájlt, és illesszük be a struktúrát. A div elemeket az L1, L2, L3, L4 és L5 osztályokkal kell jelölni.
Most, hogy létrehozta az alapstruktúrát, meg akarjuk győződni arról, hogy az elemek kezdeti sorrendje balról jobbra haladva 5-től 1-ig. A cél az, hogy az elemek 1-től 5-ig növekvő sorrendben jelenjenek meg.
Ennek eléréséhez használjuk a CSS-ben a sorrend tulajdonságot minden egyes elemhez. Kezdje a sorrend értékek beállításával, hogy az L1 sorrendje 5 legyen, az L2 sorrendje 4, és így tovább, egészen az L5-ig, amelynek sorrendje 1 lesz.
Ha ezután elmenti a módosításokat a böngészőben, és újratölti az oldalt, akkor az elemeket a helyes sorrendben kell látnia, 1-től 5-ig.
Azonban, mint már említettük, ezt a feladatot kétféleképpen is meg lehet oldani. Az első mód a fentebb ismertetett sorrend tulajdonság használata. A második módszer, amelyet most megnézünk, a flex-direction tulajdonságot használja.
A másik lehetőség felfedezéséhez először kommentáljuk ki a sorrend tulajdonságokat a CSS-fájlunkban, hogy az új módszert úgy próbálhassuk ki, hogy az előzőt ne veszítsük el.
Most a flex-direction tulajdonságot használhatjuk a konténerhez. Alapértelmezés szerint ez a sorra van beállítva. Ezt változtassuk meg row-reverse-re, aminek hatására az elemek sorrendje megfordul.
Miután a flex-directiont row-reverse-re változtattuk, mentsük el újra a fájlt, és töltsük be az előnézetet a böngészőben. Most már a helyes sorrendben kell látnia az elemeket 1-től 5-ig anélkül, hogy a sorrend tulajdonságot kellene használnia.
Egy másik példa, amit kipróbálhat, hogy az oszlop-fordított irány használatával függőlegesen rendezi el az elemeket. Ez az elrendezést alulról felfelé rendezi.
Most már világosan meg kell értenie a flex elemek sorrendjének megváltoztatására szolgáló két módszert: a order tulajdonságot és a flex-direction tulajdonságot. Mindkét módszer különböző megközelítéseket kínál a tartalom megjelenítésének testreszabásához.
Összefoglaló
Ebben az útmutatóban megtanulta, hogyan manipulálhatja az elemek sorrendjét egy flex konténerben. Most már tudja, hogyan használhatja a order tulajdonságot és hogyan szabhatja testre a flex-direction tulajdonságot, hogy megváltoztassa az elemek megjelenítését vízszintesen és függőlegesen egyaránt. Kísérletezzen ezekkel a megközelítésekkel, hogy jobban megértse a flexbox elrendezéseket.
Gyakran ismételt kérdések
Hogyan változtathatom meg a flex elemek sorrendjét a order tulajdonsággal?A order tulajdonságot hozzárendelheti az egyes elemekhez, és beállíthatja az értékeket, hogy a kívánt sorrendben jelenítse meg őket.
Van mód a sorrend megváltoztatására sorrend nélkül?Igen, a flex-direction tulajdonságot beállíthatja sor-fordított vagy oszlop-fordított értékre a sorrend megváltoztatásához.
Az, hogy a két módszer közül melyiket érdemes használni, az Ön egyedi követelményeitől és a kívánt elrendezési stratégiától függ. Mindkét módszer hatékony.
