📖
Flexbox — контейнер і головна вісь
display:flex, justify-content, align-items, gap
🎋
Flexbox — гнучкий контейнер
Уяви піднос з тарілками. Ти вирішуєш: розставити тарілки в ряд зліва направо, або в колонку зверху вниз, чи рівномірно по всьому підносу. І тарілки можуть бути різних розмірів — але вони завжди вписуються. Flexbox — це той піднос: ти задаєш правила, а браузер розставляє елементи.
Як увімкнути Flexbox
Додай display: flex до контейнера (батьківського елемента). Всі прямі дочірні елементи стають flex-елементами.
css
.container {
display: flex;
}html
<div class="container">
<div>1</div>
<div>2</div> <!-- це flex-елементи -->
<div>3</div>
</div>flex-direction — головна вісь
css
flex-direction: row; /* → зліва направо (за замовч.) */
flex-direction: row-reverse; /* ← справа наліво */
flex-direction: column; /* ↓ зверху вниз */
flex-direction: column-reverse;/* ↑ знизу вгору */justify-content — вирівнювання по ГОЛОВНІЙ осі
css
justify-content: flex-start; /* ← всі зліва (за замовч.) */
justify-content: center; /* || по центру */
justify-content: flex-end; /* → всі справа */
justify-content: space-between; /* |el el el| рівний відступ між */
justify-content: space-around; /* | el el el | відступи навколо */
justify-content: space-evenly; /* | el el el | рівні відступи скрізь */align-items — вирівнювання по ПОПЕРЕЧНІЙ осі
css
align-items: stretch; /* розтягнуті по висоті (за замовч.) */
align-items: center; /* по центру вертикалі */
align-items: flex-start; /* зверху */
align-items: flex-end; /* знизу */css
💬
gap замінює margin між flex-елементами — набагато зручніше. flex: 1 1 300px — скорочення для flex-grow flex-shrink flex-basis.
Щоб відцентрувати елемент — display: flex + justify-content: center + align-items: center. Це найпростіший спосіб центрування в CSS і він нарешті з'явився після 20 років хаків.