CSS за начинаещи – display: flex – всичко, което трябва да знаеш

В днешният урок от секцията CSS за начинаещи на {dev} blondie; ще ти разкажа и покажа какво може да правиш със CSS3 и едно от любимите ми негови property-та – display: flex;

Flex е много мощен layout инструмент и използван правилно ще подсигури не само правилната визия на съдържанието ти, но и неговото поведение спрямо различните резолюции.

Въведение в CSS Flexbox layout

В CSS (Cascading Style Sheets) съществуват няколко алгоритъма, посредством които определяме как да изглежда layout-a на съдържанието ни. Всеки един от тези алгоритми има свой микро-език, посредством който задаваме състоянието на различните компоненти. По подразбиране алгоритмът, който се използва при рендериране на уеб страница е Flow или иначе казано – всички елементи са блокови и падат един под друг (точно като в Microsoft Word документ).

Всеки един от CSS алгоритмите за layout е създаден, за да разрешава специфичен проблем. Вероятно се питаш какъв проблем разрешава Flex?

Основната идея зад Flex е да се предостави възможност на контейнера да променя ширината и/или височината на своите елементи (и реда им), за да запълни най-добре наличното пространство (главно за адаптиране към различни видове устройства за показване и размери на екрани). Контейнер с настройка display:flex; разширява елементите, за да запълни свободното пространство или ги намалява, за да предотврати преливане.

Как да използваш CSS Flex?

Обяснено по най-простият начин, за да използваш display: flex; всичко, от което се нуждаеш е селектор на елемента, който искаш да има това свойство:

.container {
  display: flex;
}

Дори само единствено с този един ред код всички елементи, които се намират в div с клас име container ще се подредят един до друг.

С това обаче възможностите на display: flex; изобщо не се изчерпват, тъкмо обратното. Веднъж приел свойство flex, контейнерът може да „подрежда“ child елементите си в най-различни конфигурации.

Настройки на parent контейнера

➡️ Вертикално подравняване – align-items

Това property указва на контейнера, който вече има display: flex; как да подреди съдържащите си child елементи по хоризонтала. Възможностите тук са:

• align-items: flex-start;
• align-items: center;
• align-items: flex-end;
• align-items: stretch;
• align-items: baseline;

Сред най-често използваните са първите три:

➡️ Хоризонтално подравняване – justify-content

Тук определяме подравняването по главната ос. Посредство justify-content разпределяме допълнителното свободно пространство, което остава между child елементите на контейнера. Възможностите на justify-content са:

• justify-content: flex-start;
• justify-content: center;
• justify-content: flex-end;
• justify-content: space-between;
• justify-content: space-around;
• justify-content: space-evenly;

➡️ Flex wrap

По подразбиране всички елементи в контейнер с display: flex; ще се съберат в един ред (независимо колко на брой са). С flex-wrap можем да контролираме това поведение на layout-a и да зададем дали елементите да се побират в един ред или да продължават на втори ред, в случай, че общата им ширина надвишава тази на родителя им. Опциите тук са:

• flex-wrap: nowrap;
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

Wrap property-то идва на помощ често, когато child елементите в контейнера трябва да са с фиксирана ширина.

➡️ Вертикално подравняване – align-content

С това property указваме на контейнера как да подреди съдържащите си елементи по перпендикулярната ос (аналогично на justify-content, но по вертикала). И тук имаме няколко възможности:

• align-content: flex-start;
• align-content: center;
• align-content: flex-end;
• align-content: space-between;
• align-content: space-around;

Настройки на child елементите

Освен настройки на контейнера, със CSS Flex можем да задаваме настройки и на самите child елементи в него. Нека разгледаме и тях 🙂

➡️ order

По подразбиране, елементите в flex контейнера се подреждат в реда, в който са създадени в source кода. С order property-то може да променяш това и да задаваш последоватеност на зареждане в DOM дървото на всеки един от елементите.

.child-item {
  order: 5; /* default is set to 0 */
}

.child-item-two {
  order: 1;
}

Това property е изключително полезно, когато да речем искаш да имаш различна подретба на елементите за различните резолюции (например за smart устройства последният child елемент всъщност да става първи).

➡️ flex-grow

С това property определяш дали даден child елемент (и съответно flex item) да „порасне“ при необходимост. Какво означава това? Че даден елемент с flex-grow: 2; ще заема двойно повече място от други два елемента с flex-grow: 0; (какъвто е и по подразбиране):

По подразбиране стойността на това property е 0, ето и как може да я променяш за даден елемент във flex контейнера:

.item {
  flex-grow: 4; /* default 0 */
}

➡️ flex-basis

С flex-basis дефинираме размера по подразбиране на елемент, преди да бъде разпределено оставащото пространство. Може да бъде дължина (напр. 20%, 5 rem и т.н.) или ключова дума – auto, content, max-content, min-content и fit-content:

.item {
  flex-basis:  | auto; /* default auto */
}

➡️ align-self

С това property можем да укажем къде по вертикала да се подравни даден child елемент във flex контейнера. Това ще презапише (override-не) align-content настройката на самия контейнер:

А ето и какви са възможните стойности, които може да приложиш тук:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Вместо заключение

Еволюирането на CSS ни предоставя все повече възможности да създаваме layout, който е адаптивен и флуиден, предвид огромния брой устройства и резолюции, с които ние, разработчиците, се борим ежедневно.

Поддръжката на flex и всички негови property-та може да видиш тук – Can I Use (удобен уеб сайт, в който може да проверяваш поддръжката на всички CSS property-та спрямо браузър и версия).

P.S. От тук може да свалиш всички работни материали за този урок и мини проекта, разработен във видеото.

Stay blond 😉

Включи се в интензивния workshop, по време на който ще създадем интерактивен уеб сайт по подаден във Figma дизайн.