V dnešnom tutoriáli sa pozrieme na zaujímavé cvičenie na tému "Poriadok" vo Flexboxe. Naučíte sa, ako zmeniť poradie prvkov v kontajneri flex dvoma rôznymi spôsobmi. Použijeme prístupy pomocou tried CSS, ako aj vlastnosť flexboxu flex-direction. Na konci tejto príručky budete schopní nielen pochopiť poradie prvkov, ale ho aj efektívne implementovať. Poďme sa do toho pustiť!
Kľúčové poznatky
- Poradie prvkov flex môžete zmeniť pomocou vlastnosti order.
- Alternatívnym spôsobom usporiadania prvkov je vlastnosť flex-direction, ktorá umožňuje určiť poradie.
Pokyny krok za krokom
Ak chceme zmeniť poradie obsahu v kontajneri flex, najprv vytvoríme jednoduché rozloženie. Na tento účel môžete vziať dokument HTML obsahujúci päť prvkov div, ktorých poradie chceme zmeniť. Čísla v prvkoch div predstavujú aktuálne poradie od 5 po 1.
V prvom kroku otvorte súbor HTML a vložte štruktúru. Prvky div by mali byť označené triedami L1, L2, L3, L4 a L5.
Teraz, keď ste vytvorili základnú štruktúru, chceme sa uistiť, že počiatočné poradie prvkov je zľava doprava od 5 po 1. Cieľom je zobraziť prvky vo vzostupnom poradí od 1 po 5.
Aby ste to dosiahli, použite vlastnosť order vo vašom CSS pre každý prvok. Začnite nastavením hodnôt order tak, aby L1 mal order 5, L2 mal order 4 a tak ďalej až po L5, ktorý má order 1.
Ak potom uložíte zmeny v prehliadači a znovu načítate stránku, mali by ste teraz vidieť prvky v správnom poradí od 1 po 5.
Ako už bolo spomenuté, túto úlohu však môžete vyriešiť dvoma spôsobmi. Prvým spôsobom je použitie vyššie opísanej vlastnosti order. Druhý spôsob, na ktorý sa teraz pozrieme, využíva vlastnosť flex-direction.
Ak chcete preskúmať druhé možnosti, najprv zakomentujte vlastnosti order vo vašom súbore CSS, aby sme mohli vyskúšať novú metódu bez toho, aby sme prišli o predchádzajúcu.
Teraz môžete použiť vlastnosť flex-direction pre kontajner. V predvolenom nastavení je nastavená na riadok. Zmeníme ju na row-reverse, čo by malo spôsobiť, že sa poradie prvkov obráti.
Po zmene flex-direction na row-reverse súbor opäť uložte a načítajte náhľad v prehliadači. Teraz by ste mali vidieť prvky v správnom poradí od 1 po 5 bez toho, aby ste museli použiť vlastnosť order.
Ďalším príkladom, ktorý môžete vyskúšať, je použitie stĺpcového smeru na zvislé usporiadanie prvkov. Tým sa rozloženie zoradí zdola nahor.
Teraz by ste mali jasne pochopiť dve metódy na zmenu poradia prvkov flex: vlastnosť order a vlastnosť flex-direction. Obe metódy vám ponúkajú rôzne prístupy na prispôsobenie zobrazenia obsahu.
Zhrnutie
V tejto príručke ste sa naučili, ako manipulovať s poradím prvkov v kontajneri flex. Teraz viete, ako používať vlastnosť order a ako prispôsobiť vlastnosť flex-direction na zmenu zobrazenia prvkov v horizontálnom aj vertikálnom smere. Experimentujte s týmito prístupmi, aby ste lepšie porozumeli rozloženiu flexboxu.
Často kladené otázky
Ako môžem zmeniť poradie prvkov flexboxu pomocou vlastnosti order?Vlastnosť order môžete priradiť každému prvku a nastaviť hodnoty tak, aby sa zobrazovali v požadovanom poradí.
Existuje spôsob, ako zmeniť poradie bez order?Áno, môžete nastaviť vlastnosť flex-direction na hodnotu row-reverse alebo column-reverse a zmeniť tak poradie.
Ktorý z týchto dvoch spôsobov je lepšie použiť, závisí od vašich konkrétnych požiadaviek a požadovanej stratégie rozloženia. Obe metódy sú účinné.
