Je důležité, aby uživatelské rozhraní bylo intuitivní a atraktivní. Jeden způsob, jak toho dosáhnout, je použití Flexbox ve stylu CSS. S Flexboxem můžeš nejen ovládat zarovnání a rozvržení prvků v rozložení, ale také měnit viditelnost a pořadí prvků, aniž by byl ovlivněn DOM (Document Object Model). V tomto návodu se podíváme podrobněji na CSS vlastnost order, která ti umožní změnit pořadí prvků Flexboxu, a na použití flex-direction k jednoduchému otočení pořadí prvků k zobrazení.
Nejdůležitější poznatky
- Vlastnost CSS order ovlivňuje viditelné pořadí prvků Flexboxu.
- Změny v pořadí order nemají vliv na původní pořadí v DOM.
- Směr Flexboxu lze otočit pomocí flex-direction (např. row-reverse) k úpravě zobrazení.
Krok za krokem
Pro demonstrování fungování vlastnosti order a možnosti obrátit zobrazení pomocí flex-direction půjdeme skrze následující kroky:
1. Vytvoření základů Flexboxu
Nejdříve musíš zajistit, že tvůj kontejner má vlastnosti Flexboxu. Pro nastavení těchto vlastností Flexboxu použij CSS pravidlo display: flex; na tvém kontejneru.
2. Porozumění pořadí prvků v DOM
Podívej se na původní pořadí prvků ve tvém DOM. Je důležité vědět, že standardní pořadí v DOM je výchozí základ, na kterém staví vlastnost order Flexboxu.
3. Použití vlastnosti Order
K ovlivnění zobrazení prvků můžeš nastavit hodnoty order na záporné hodnoty. Prvky mají standardně hodnotu 0. Pokud prvkům přiřadíš hodnotu -1, vizuálně se posunou dopředu.
4. Aplikace vizuálního řazení
Pokud chceš vizuálně upravit první prvek, měj na paměti: Výchozí hodnota pro vlastnost order je 0. Pro zobrazení prvku před jiným vybírej menší hodnoty. Přiřazení jako -1, -2 nebo dokonce záporné stovky jsou možné.
5. Provádění dalších úprav
Změň hodnoty order pro zbývající prvky. Například abys měl druhý prvek na prvním místě, označ ho jako -1 nebo mu přidej hodnotu menší než současná hodnota order.
6. Použití negativní hodnoty orderu
Pokud použiješ vlastnost order k změně pořadí, bude vizuální řazení seřazeno vzestupně, kde nejmenší hodnota je první.
7. Obrácení směru Flex-Direction
Jedním z nejmocnějších nástrojů je vlastnost flex-direction. Nastavením na row-reverse se změní pořadí zobrazení zprava doleva. Zkontroluj, jak se prvky při této změně vizuálně uspořádají.
8. Změna orderu v opačném směru
Pokud použiješ flex-direction: column;, bude layout renderován shora dolů. Záporný atribut orderu lze v tomto případě také použít k ovlivnění pořadí.
9. Použití pro čtečku obrazovky
Pokud chceš vzít v úvahu vizuální pořadí pro čtečku obrazovky, je důležité vědět, že čtečka obrazovky čte původní pořadí DOM. Proto nejsou úpravy vzhledu s order přístupné všem uživatelům.
Shrnutí
V této příručce jste se naučili, jak používat vlastnost order v CSS k ovládání viditelnosti a pořadí prvků ve Flexboxu. Kromě toho jste zjistili, jak můžete prostřednictvím vlastnosti flex-direction změnit zobrazení, abyste své rozvržení udělali ještě pružnější a uživatelsky přívětivější. Mějte na paměti, že vizuální úpravy ve zobrazení nezmění pořadí DOM, což by mělo být zohledněno při přístupnosti.
Často kladené dotazy
Jak funguje vlastnost order?Vlastnost order ovlivňuje viditelné pořadí prvků ve Flexboxu. Nižší hodnota se zobrazí jako první.
Jak mohu obrátit flex-direction?Nastavte vlastnost flex-direction na row-reverse nebo column-reverse, abyste změnili pořadí zobrazení.
Ovlivňuje vlastnost order DOM pořadí?Ne, vlastnost order mění pouze vizuální zobrazení prvků, nikoli pořadí v DOM.
Co se stane, pokud jsou hodnoty order stejné?Pokud jsou hodnoty order stejné, použije se původní DOM pořadí pro zobrazení.
Jak bych měl pracovat se Screen Readery?Vzhledem k tomu, že Screen Readery čtou DOM pořadí, ujistěte se, že vizuální uspořádání zůstává přístupné pro všechny uživatele.
