Ефективни промени в реда на Flexbox с CSS

В днешното ръководство ще разгледаме интересно упражнение на тема "Поръчка" в Flexbox. Ще научиш как можеш да пренаредиш реда на елементите в Flex контейнер по два различни начина. Ще използваме подходите с CSS класове, както и Flexbox свойството flex-direction. В края на това ръководство ще бъдеш в състояние не само да разбереш реда на елементите, но и да го приложиш ефикасно. Да започнем!

Най-важните изводи

• Можеш да промениш реда на Flex елементите чрез свойството order.
• Алтернативен метод за подреждане на елементите е използването на свойството flex-direction, което позволява предварително задаване на реда.

По стъпково ръководство

За да промениш реда на съдържанието в един Flex контейнер, първо ще създадем прост лейаут. Можеш да започнеш с HTML документ, в който има пет div елемента, които искаме да подредим. Числата в div елементите представляват настоящия ред от 5 до 1.

За първата стъпка отвори HTML файла си и добави структурата. Div елементите трябва да бъдат отбелязани с класовете L1, L2, L3, L4 и L5.

След като си задал основната структура, искаме да осигурим, че началният ред на елементите е от ляво надясно от 5 до 1. Целта е елементите да бъдат показани във възходящ ред от 1 до 5.

За да постигнеш това, използвай свойството order в CSS-a си за всеки елемент. Започни като зададеш стойностите на order така, че L1 да получи Order 5, L2 - 4, и така нататък до L5, която има Order 1.

След като запазиш промените и презаредиш страницата в браузъра, вече трябва да виждаш елементите в правилния ред от 1 до 5.

Все пак, както вече беше споменато, има два начина да решиш тази задача. Първият начин е чрез използване на свойството order, както беше описано по-горе. Вторият метод, който ще разгледаме сега, използва свойството flex-direction.

За да изследваш другите възможности, първо трябва да коментираш order свойствата в CSS файла си, за да можем да пробваме новия метод, без да губим предходния.

Сега можеш да използваш свойството flex-direction за контейнера. По подразбиране то е настроено на row. Промени го на row-reverse, което би трябвало да предизвика инвертиране на реда на елементите.

След като промениш flex-direction на row-reverse, отново запази файла и зареди прегледа в браузъра. Сега трябва да виждаш елементите в правилния ред от 1 до 5, без да се налага да използваш свойството order.

Още едно пример, който можеш да опиташ, е да използваш column-reverse за вертикално подреждане на елементите. Така лейаутът ще бъде подреден отдолу нагоре.

Сега трябва ясно да разбираш двете метода за промяна на реда на Flex елементите: свойството order и свойството flex-direction. И двете метода ти предоставят различни подходи за настройка на визуализацията на съдържанието си.

Резюме

В това ръководство си научил как да манипулираш реда на елементите в един Flex контейнер. Вече познаваш използването на свойството order и как можеш да промениш свойството flex-direction, за да промениш визуализацията на елементите си както хоризонтално, така и вертикално. Експериментирай с тези подходи, за да развиеш по-добро разбиране за Flexbox лейаутите.