Efektivní změny pořadí v Flexboxu pomocí CSS

V dnešní poučce se budeme zabývat zajímavým cvičením na téma "Order" ve Flexboxu. Naučíš se, jak můžeš přeuspořádat pořadí prvků v Flex kontejneru pomocí dvou různých přístupů. Budeme pracovat s přístupy pomocí tříd CSS a vlastnosti flex-direction ve Flexboxu. Na konci této poučky budeš schopen nejen porozumět pořadí prvků, ale také efektivně ho implementovat. Pojďme na to!

Nejdůležitější poznatky

• Můžeš změnit pořadí Flex prvků pomocí vlastnosti order.
• Alternativní metoda pro uspořádání prvků poskytuje vlastnost flex-direction, která umožňuje předdefinovat pořadí.

Krok za krokem

Pokud chceš změnit pořadí obsahu v Flex kontejneru, vytvoříme nejprve jednoduchý layout. Můžeš si vzít HTML dokument, ve kterém jsou obsaženy pět div elementů, které chceme přeuspořádat. Čísla v div elementech reprezentují aktuální pořadí od 5 do 1.

Pro první krok otevři svůj HTML soubor a vlož strukturu. Div elementy by měly být označeny třídami L1, L2, L3, L4 a L5.

Po stanovení základní struktury chceme ujistit, že výchozí pořadí prvků z levé strany doprava je od 5 do 1. Cílem je zobrazit prvky v rostoucím pořadí od 1 do 5.

Pro dosažení tohoto využij vlastnost order ve svém CSS pro každý prvek. Začni nastavením hodnot order tak, že L1 dostane order 5, L2 dostane 4, a tak dále až po L5, která má order 1.

Pokud uložíš své změny v prohlížeči a znovu načteš stránku, měl bys nyní vidět prvky v korektním pořadí od 1 do 5.

Existují však, jak jsme již zmínili, dvě možnosti řešení tohoto úkolu. První možností je použití výše popsané vlastnosti order. Druhá metoda, kterou si nyní probereme, využívá vlastnost flex-direction.

Chceš-li prozkoumat další možnosti, nejdříve zakomentuj order vlastnosti ve svém CSS souboru, abychom mohli zkoušet novou metodu, aniž bychom ztratili tu předchozí.

Nyní můžeš použít vlastnost flex-direction pro kontejner. V základu je nastavena na row. Změníme ji na row-reverse, což by mělo způsobit inverzi pořadí prvků.

Po změně flex-direction na row-reverse opět ulož soubor a zobraz náhled v prohlížeči. Nyní bys měl vidět prvky v korektním pořadí od 1 do 5, aniž bychom museli použít order vlastnost.

Čeká tě další příklad, který můžeš vyzkoušet, a to je použití column-reverse pro vertikální uspořádání prvků. Tímto způsobem bude layout seřazen zespodu nahoru.

Nyní bys měl jasně rozumět oběma metodám pro změnu pořadí Flex prvků: vlastnost order a vlastnost flex-direction. Obě metody ti nabízejí různé přístupy ke změně zobrazení svého obsahu.

Shrnutí

V této poučce jsi se naučil, jak můžeš manipulovat s pořadím prvků v Flex kontejneru. Nyní znáš použití vlastnosti order a jak můžeš upravit vlastnost flex-direction pro změnu zobrazení svých prvků jak horizontálně, tak vertikálně. Experimentuj s těmito přístupy pro lepší porozumění Flexbox layoutů.