Пошук уроків, статей та іншого контенту
Розташування елементів в один ряд чи стовпець — justify-content, align-items та flex-ріст/стиснення.
Flexbox розташовує дочірні елементи вздовж однієї осі — або в ряд, або в стовпець (звідси «одновимірна» — на відміну від Grid у наступному уроці, що керує обома вимірами одночасно). Це типовий вибір для навігаційних панелей, рядів кнопок, карток в один ряд, вертикального центрування вмісту.
.nav {
display: flex;
flex-direction: row; /* типове значення — елементи в ряд зліва направо */
gap: 16px; /* відступ між елементами, без margin-хаків */
}flex-direction визначає, яка вісь — головна: row робить головною горизонтальну вісь, column — вертикальну. justify-content вирівнює елементи вздовж головної осі, align-items — вздовж поперечної:
.nav {
display: flex;
justify-content: space-between; /* розподілити вздовж ГОЛОВНОЇ (горизонтальної) осі */
align-items: center; /* вирівняти по центру ПОПЕРЕЧНОЇ (вертикальної) осі */
}justify-content: flex-start | center | space-between | space-around — розподіл вздовж головної осі.
align-items: flex-start | center | flex-end | stretch — вирівнювання вздовж поперечної осі.
Класична задача «вертикально й горизонтально відцентрувати вміст», що роками вважалась незручною в CSS, вирішується Flexbox буквально трьома рядками: display: flex; justify-content: center; align-items: center;.
Ці три властивості (часто скорочено записувані одним flex: <grow> <shrink> <basis>) визначають, як конкретний дочірній елемент поводиться, коли простору більше чи менше за суму природних розмірів усіх елементів:
.sidebar { flex: 0 0 250px; } /* не росте, не стискається, базовий розмір 250px — фіксована ширина */
.content { flex: 1 1 0; } /* росте й стискається, займає весь вільний простір, що лишився */flex-grow визначає, наскільки елемент забирає собі вільний простір, що лишився після розкладки всіх елементів за їхніми базовими розмірами; flex-shrink — наскільки елемент стискається, якщо простору для всіх бракує; flex-basis — початковий, «природний» розмір елемента до застосування grow/shrink.
.card-grid {
display: flex;
flex-wrap: wrap; /* елементи переносяться на новий рядок, коли не вміщаються */
gap: 16px;
}Плутати justify-content і align-items за тим, до якої осі кожен застосовується, — напрямок обох залежить від flex-direction, а не завжди «горизонтально/вертикально» буквально.
Використовувати margin: auto для розпорок замість justify-content: space-between чи gap — технічно працює, але менш явно виражає намір і складніше підтримувати.
Забути flex-wrap: wrap для рядів, що мають переноситись на маленьких екранах, — елементи стискаються до нечитабельного розміру замість переходу на новий рядок.
Flexbox розташовує дочірні елементи вздовж однієї осі (row чи column), з justify-content для розподілу вздовж головної осі й align-items для вирівнювання вздовж поперечної. flex-grow/shrink/basis керують тим, як конкретний елемент ділить доступний простір із сусідами, а flex-wrap дозволяє елементам переноситись на новий рядок, коли не вміщаються.