Flexbox a CSS-ben: Rendezéssel és fordított irányú rendezéssel rendezni az elemeket

Fontos, hogy a felhasználói felület intuitív és vonzó legyen. Ennek egyik módja a Flexbox használata a CSS-ben. A flexbox segítségével nem csak az elemek igazítását és elhelyezését szabályozhatja az elrendezésben, hanem az elemek láthatóságát és sorrendjét is megváltoztathatja anélkül, hogy a DOM (Document Object Model, dokumentumobjektum-modell) befolyásolná. Ebben a bemutatóban közelebbről megnézzük a CSS sorrend tulajdonságát, amely lehetővé teszi a flexbox elemek sorrendjének megváltoztatását, valamint a flex-direction használatát az elemek megjelenítési sorrendjének egyszerű megfordításához.

A legfontosabb megállapítások

• A CSS tulajdonság sorrendje befolyásolja a flexbox elemek látható sorrendjét.
• A sorrend megváltoztatása nincs hatással az eredeti sorrendre a DOM-ban.
• A flexbox iránya a flex-direction segítségével megfordítható (pl. row-reverse) a megjelenítési sorrend megváltoztatásához.

Lépésről-lépésre történő utasítások

A sorrend tulajdonság működésének és a megjelenítés flex-directionnel történő megfordításának lehetőségének bemutatásához a következő lépéseken fogunk végigmenni:

1. hozzuk létre a flexbox alapjait

Először is meg kell győződnünk arról, hogy a konténerünk rendelkezik a flexbox tulajdonságokkal. Ehhez állítsuk be a konténerünkön a display: flex; CSS-szabályt.

2. Értsük meg az elemek sorrendjét a DOM-ban

Nézd meg az elemek eredeti sorrendjét a DOM-ban. Fontos tudni, hogy a DOM-ban lévő alapértelmezett sorrend az a kiindulópont, amelyen a flexbox sorrendje alapul.

3. A sorrend tulajdonság használata

Az elemek megjelenítésének befolyásolásához a order tulajdonságot negatív értékre állíthatja. Alapértelmezés szerint az elemek értéke 0. Ha -1 értéket rendel egy elemhez, akkor az vizuálisan előre húzódik.

4. Vizuális rendezés alkalmazása

Ha vizuálisan szeretné beállítani az első elemet, akkor a következőket kell figyelembe vennie: A sorrend tulajdonság alapértelmezett értéke 0. Ahhoz, hogy egy elemet egy másik előtt jelenítsen meg, kisebb értéket kell választania. Olyan hozzárendelések is lehetségesek, mint a -1, -2 vagy akár negatív százas értékek.

5. További beállítások elvégzése

Módosítsa a fennmaradó elemek sorrendértékeit. Például ahhoz, hogy a második elem az első pozícióban legyen, -1-gyel kell jelölni, vagy a jelenlegi sorrendértéknél kisebb értéket kell hozzá rendelni.

6. Használjon negatív sorrendértéket

Ha a sorrend tulajdonságot használja a sorrend megváltoztatására, a vizuális sorrend növekvő sorrendbe rendeződik, a legkisebb értékkel az első helyre.

7. fordított hajlítási irány

Az egyik leghatékonyabb eszköz a flex-direction tulajdonság. Ha ezt a tulajdonságot sorfordítóra állítja, a megjelenítési sorrend jobbról balra változik. Nézze meg, hogyan rendeződnek vizuálisan az elemek ezzel a változással.

8. sorrendváltás fordított irányban

Ha a flex-direction: column; tulajdonságot használja, az elrendezés felülről lefelé renderelődik. A sorrend befolyásolására ebben az esetben is használható negatív order attribútum.

9. alkalmazás képernyőolvasóhoz

Ha a képernyőolvasók számára szeretnénk figyelembe venni a vizuális sorrendet, fontos tudni, hogy a képernyőolvasók az eredeti DOM-sorrendet olvassák ki. Ezért a sorrenddel történő vizuális átrendezés nem minden felhasználó számára elérhető.

Összefoglaló

Ebben az útmutatóban megtanulta, hogyan használhatja a CSS order tulajdonságot a flexbox elemek láthatóságának és sorrendjének szabályozására. Azt is megtudta, hogyan fordíthatja meg a megjelenítést a flex-direction segítségével, hogy még rugalmasabbá és felhasználóbarátabbá tegye elrendezéseit. Ne feledje, hogy a megjelenítés vizuális beállításai nem változtatják meg a mögöttes DOM-sorrendet, amelyet a hozzáférhetőség szempontjából figyelembe kell venni.