Flexbox в CSS: опаковане за оптимални оформления

В този учебник ще се съсредоточим върху практическото прилагане на Flexbox, по-специално на свойството flex-wrap. Тази техника е от решаващо значение за създаването на responsive макети в уеб проекти. Целта е да се постигне специфично подреждане на елементите в гъвкав контейнер, които при нужда могат да бъдат пренасяни. Ще научиш как да подредиш елементите така, че да преходят елегантно от един ред в друг и да запазят равномерни разстояния.

Най-важни заключения

• Използването на flex-wrap позволява на Flexbox елементите да бъдат преместени на нов ред, когато е необходимо.
• С flex-direction: row елементите могат да бъдат подредени хоризонтално, докато flex-wrap: wrap-reverse гарантира пренасянето отдолу нагоре.
• За гарантиране на равномерни разстояния между елементите е важно justify-content: space evenly.

Инструкции стъпка по стъпка

Първо ще се запознаем с задачата и ще разгледаме желания крайен резултат.

Крайният резултат трябва да изглежда така, че номерациите от 1 до 10 да бъдат разбити в гъвкав контейнер отдолу нагоре. Важно е редът да бъде правилен, така че след първия ред да се появи втория.

Сега ще разгледаме HTML кода. В контейнера има десет div елемента, чиито необходими Flexbox свойства първо трябва да бъдат зададени. Тези div елементи в момента не са форматирани.

За правилно прилагане на Flexbox свойствата, прилагаш display: flex, като първоначално елементите се показват в ред (row). Първоначално ще изглежда като че всички divs са нареждани един до друг.

Все пак целият макет трябва да бъде настроен, за да постигнеш желания външен вид. Контейнерът трябва да бъде с настройки като Flexbox и елементите трябва да се разпределени на нов ред.

Преди да започнеш със стилизирането, увери се, че разстоянията между елементите са равномерни и подходящи. Важно е да имаш еднакво разстояние както между редовете, така и след реда.

Сега след като си сложил основата, опитай се да постигнеш решението. Първият ред ще бъде подреден хоризонтално отляво надясно, а вторият ред ще бъде съответно разбит.

Целта е последният ред с елементите 9 и 10 да бъде разположен горе и да се гарантират равномерни разстояния.

Сега div елементите трябва да имат CSS правила за модела на Flexbox. Важно е да споменеш, че можеш да променяш размера на елементите, като активираш свойството за пренасяне, за да не бъдат сгъстени.

След като внесеш съответните правила, провери макета си в браузъра. Ако все още не си доволен от резултата, направи видими направените промени в CSS, ако е необходимо.

Ключът към твоя макет се крие в свойствата flex-wrap и justify-content. Ако използваш flex-wrap: wrap-reverse, макетът ще бъде такъв, че редовете ще бъдат добавяни отдолу нагоре.

Второто важно свойство е justify-content: space-evenly. Това осигурява равномерни разстояния както между редовете, така и отгоре и отдолу.

В случай, че вместо това използваш space-between, ще забележиш, че няма разстояние отгоре и отдолу. Това не е оптимално за изгледа на макета, поради което space-evenly е предпочитаната опция.

Резюме

В това упражнение научихте колко важно е flex-wrap за създаването на responsive макети. Видяхте също как се осъществява подреждането на елементите чрез Flexbox и кои свойства са важни за равномерните разстояния.