Тема 17 CSS Flexbox. Частина 2

`CSS` Flexbox. Частина 2

Пояснення:

Flex-direction: напрямок

У flex-контейнера є дві осі: - Основна вісь — напрямок, у якому стоять елементи (зліва направо або зверху вниз).- Поперечна вісь — напрямок перпендикулярний до основного.

Щоб задати напрямок, у якому будуть стояти елементи, використовується властивість flex-direction.
Вона має такі значення: row – елементи йдуть зліва направо (за замовчуванням головна)

column – елементи йдуть зверху вниз

flex-wrap: Перехід елементів на новий рядок

За замовчуванням усі елементи стоять в один ряд, навіть якщо не вміщаються. Але якщо ми хочемо, щоб вони переносилися на новий рядок, використовуємо: flex-wrap: wrap;

nowrap – усі квадрати залишаються в одному рядку, навіть якщо не вміщаються.

wrap – квадрати, які не поміщаються, автоматично переходять на новий рядок.

align-content

align-content – це властивість, яка визначає вертикальне вирівнювання рядків у контейнері з flex-wrap: wrap. Вона працює тільки, якщо елементи займають більше одного ряду.
Основні значення у прикладі:
flex-start – всі рядки зсуваються до верху контейнера.
center – всі рядки по центру контейнера.
flex-end – всі рядки зсуваються до низу контейнера.

У нашому коді:
.container має flex-wrap: wrap, щоб елементи могли переноситися на нові рядки.
align-content змінює розташування цих рядків по вертикалі.
Висота контейнера (300px) потрібна, щоб було видно, як рядки займають простір.

order

Елемент з меншим значенням order з’являється раніше, з більшим – пізніше.
Можна використовувати будь-які числа: від’ємні, нульові, додатні.

Приклад:
order: 1 – перший елемент у контейнері стане другим.
order: -1 – елемент стане першим.
Це корисно, коли треба змінити порядок відображення елементів у flex-контейнері без перестановки HTML-коду.

Українською:

Англійською:

Таблиця:

№	Тема	Приклад коду	Підсумок
1	flex-direction	`<head> <style> .container{ display: flex; align-items: center; flex-direction: column; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>`	flex-direction визначає, в якому напрямку розташовуються елементи всередині flex-контейнера. Значення: row – горизонтально, зліва направо; row-reverse – горизонтально, справа наліво; column – вертикально, зверху вниз; column-reverse – вертикально, знизу вверх.
2	flex-wrap	`<head> <style> .container{ display: flex; flex-wrap: wrap; } .container div{ width: 100px; height: 100px; background: lightblue; margin: 5px; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>`	flex-wrap визначає, чи будуть елементи переноситись на новий рядок у flex-контейнері. nowrap – усі елементи в один ряд; wrap – елементи переносяться при нестачі місця; wrap-reverse – перенос у зворотному напрямку.
3	align-content	`<head> <style> .container{ display: flex; flex-wrap: wrap; height: 300px; align-content: space-between; } .container div{ width: 100px; height: 100px; background: lightgreen; margin: 5px; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> </body>`	align-content вирівнює ряди елементів у flex-контейнері вздовж поперечної осі, якщо є кілька рядів. Значення: flex-start, flex-end, center, space-between, space-around, stretch.
4	order	`<head> <style> .container{ display: flex; } .c1{order: 2;} .c2{order: 3;} .c3{order: 1;} .c3{order: -1;} </style> </head> <body> <div class="container"> <div class="c1">1</div> <div class="c2">2</div> <div class="c3">3</div> </div> </body>`	order задає порядок відображення елементів у flex-контейнері. За замовчуванням усі елементи мають order: 0. Менше число — елемент відображається раніше.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC