Flexbox v CSS: Ako zoradiť prvky pomocou poradia a obráteného smeru

Je dôležité, aby bolo používateľské rozhranie intuitívne a príťažlivé. Jedným zo spôsobov, ako to dosiahnuť, je použiť Flexbox v CSS. Pomocou flexboxu môžete nielen ovládať zarovnanie a umiestnenie prvkov v rozložení, ale aj meniť viditeľnosť a poradie prvkov bez toho, aby ste ovplyvnili DOM (Document Object Model). V tomto návode sa bližšie pozrieme na vlastnosť order CSS, ktorá umožňuje meniť poradie prvkov flexboxu, ako aj na použitie flex-direction na jednoduchú zmenu poradia zobrazenia prvkov.

Kľúčové zistenia

• Poradie vlastností CSS ovplyvňuje viditeľné poradie prvkov flexboxu.
• Zmeny poradia nemajú žiadny vplyv na pôvodné poradie v DOM.
• Smer flexboxu je možné zmeniť pomocou flex-direction (napr. row-reverse) a zmeniť tak poradie zobrazenia.

Pokyny krok za krokom

Aby sme si ukázali, ako funguje vlastnosť order a možnosť obrátiť zobrazenie pomocou flex-direction, prejdeme nasledujúcimi krokmi:

1. vytvoríme základy flexboxu

Najprv sa musíte uistiť, že váš kontajner má vlastnosti flexbox. Na tento účel nastavte na svojom kontajneri pravidlo CSS display: flex;.

2. Pochopte poradie prvkov v DOM

Pozrite sa na pôvodné poradie prvkov vo vašom DOM. Je dôležité vedieť, že predvolené poradie v DOM je východiskovým bodom, z ktorého vychádza poradie flexboxu.

3. Používanie vlastnosti order

Ak chcete ovplyvniť zobrazenie prvkov, môžete nastaviť vlastnosť order na záporné hodnoty. V predvolenom nastavení majú prvky hodnotu 0. Ak prvku priradíte hodnotu -1, bude vizuálne vytiahnutý dopredu.

4. použiť vizuálne triedenie

Ak chcete vizuálne upraviť prvý prvok, mali by ste si všimnúť nasledujúce skutočnosti: Predvolená hodnota vlastnosti order je 0. Ak chcete zobraziť jeden prvok pred druhým, musíte zvoliť menšiu hodnotu. Možné sú priradenia ako -1, -2 alebo dokonca záporné hodnoty sto.

5. Vykonajte ďalšie úpravy

Zmeňte hodnoty poradia zostávajúcich prvkov. Ak chcete mať napríklad druhý prvok na prvej pozícii, mali by ste ho označiť hodnotou -1 alebo mu priradiť hodnotu menšiu, ako je aktuálna hodnota poradia.

6. použite zápornú hodnotu poradia

Ak použijete vlastnosť order na zmenu poradia, vizuálne poradie sa zoradí vzostupne, pričom najmenšia hodnota bude na prvom mieste.

7. obrátiť smer ohýbania

Jedným z najmocnejších nástrojov je vlastnosť flex-smer. Ak ju nastavíte na hodnotu row-reverse, poradie zobrazenia sa zmení z pravej strany na ľavú. Pozrite sa, ako sú prvky pri tejto zmene vizuálne usporiadané.

8. zmena poradia v opačnom smere

Ak použijete flex-direction: column;, rozloženie sa zobrazí zhora nadol. Na ovplyvnenie poradia možno v tomto prípade použiť aj záporný atribút order.

9. aplikácia na čítačku obrazovky

Ak chcete zohľadniť vizuálne poradie pre čítačky obrazovky, je dôležité vedieť, že čítačky obrazovky čítajú pôvodné poradie DOM. Preto vizuálne zmeny usporiadania s poradím nie sú prístupné všetkým používateľom.

Zhrnutie

V tejto príručke ste sa naučili používať vlastnosť CSS order na ovládanie viditeľnosti a poradia prvkov flexbox. Zistili ste tiež, ako zmeniť zobrazenie pomocou flex-direction, aby boli vaše rozvrhnutia ešte flexibilnejšie a používateľsky prívetivejšie. Nezabudnite, že vizuálne úpravy zobrazenia nemenia základné poradie DOM, ktoré by sa malo zohľadniť z hľadiska prístupnosti.