Важно е потребителският интерфейс да бъде интуитивен и привлекателен. Един начин да постигнете това е чрез използването на Flexbox в CSS. С Flexbox можете да контролирате не само насочването и разпределението на елементите в макета, но и да променяте видимостта и реда на елементите без да засягате DOM (Document Object Model). В този учебник ще разгледаме по-подробно CSS свойството order, което ви позволява да променяте реда на Flexbox елементите, както и използването на flex-direction, за лесно обръщане на реда на елементите за показване.
Най-важните изводи
- Свойството на CSS order влияе на видимия ред на Flexbox елементите.
- Промените в реда на order нямат влияние върху първоначалния ред в DOM.
- Посоката на Flexbox може да бъде обърната с flex-direction (например row-reverse), за да се промени показването.
По стъпково ръководство
За да демонстрираме работата на свойството order и възможността за обръщане на показването с flex-direction, ще излъчим следните стъпки:
1. Създаване на основи на Flexbox
Първо трябва да се уверите, че вашият контейнер разполага с Flexbox свойства. За целта, задайте CSS правилото display: flex; на вашия контейнер.
2. Разбиране на реда на елементите в DOM
Проверете оригиналния ред на елементите във вашия DOM. Важно е да знаете, че стандартният ред в DOM е базата, върху която се изгражда Flexbox-редът.
3. Използване на свойството Order
За да повлияете на показването на елементите, можете да зададете свойството order на отрицателни стойности. По подразбиране елементите имат стойност 0. Ако зададете стойност -1 на елемент, той ще бъде визуално изтеглен напред.
4. Прилагане на визуално сортиране
Ако искате да приспособите първия елемент визуално, трябва да имате предвид следното: Стандартната стойност на свойството order е 0. За да покажете един елемент пред друг, трябва да изберете по-малка стойност. Задачи като -1, -2 или дори отрицателни стотици са възможни.
5. Извършване на допълнителни настройки
Променете стойностите на order на останалите елементи. Например, за да имате втория елемент на първо място, трябва да му зададете -1 или да му дадете стойност по-малка от актуалната стойност на order.
6. Използването на отрицателна стойност на Order
Когато използвате свойството order за промяна на реда, визуалният ред се сортира във възходящ ред, като най-малката стойност е първо.
7. Обръщане на Flex-Direction
Едно от най-мощните инструменти е свойството flex-direction. Ако зададете това на row-reverse, редът ще се промени да се показва от дясно наляво. Проверете как се подреждат елементите в този случай визуално при тази промяна.
8. Промяна на Order в обратна насока
Когато използвате flex-direction: column;, макетът ще се изобрази отгоре надолу. Отрицателно order-атрибутът може също да бъде използван, за да повлияе на реда.
9. Приложение върху четец на екран
Ако искате да вземете предвид визуалния ред за четец на екран, е важно да знаете, че той чете първоначалния DOM ред. Затова визуалните промени с order не са достъпни за всички потребители.
Резюме
В това ръководство научихте как да използвате CSS свойството order, за да контролирате видимостта и реда на Flexbox елементите. Също така научихте как да обърнете дисплея с flex-direction, за да направите вашите макети още по-гъвкави и удобни за потребителите. Имайте предвид, че визуалните промени в изгледа не променят основния ред в DOM, което трябва да се има предвид за достъпността.
Често задавани въпроси
Как работи свойството order?Свойството order влияе на видимия ред на Flexbox елементите. Първи се показва елемент с по-ниска стойност.
Как може да обърна Flex-Direction?Задайте свойството flex-direction на row-reverse или column-reverse, за да промените реда на показване.
Влияе ли свойството order на DOM реда?Не, свойството order само променя визуалното представяне на елементите, не и реда в DOM.
Какво се случва, ако стойностите на order са равни?Ако стойностите на order са равни, се използва първоначалния DOM ред за представяне.
Как трябва да се отнася с Screen Readern?Понеже Screen Reader-ите четат DOM реда, трябва да се уверите, че визуалното подреждане остава достъпно за всички потребители.
