CSS Flexbox: одновимірні розкладки

Коротко: Flexbox розташовує елементи в рядок чи стовпець, розподіляє вільне місце й вирівнює їх. Це стандартний інструмент для меню, рядів карток і центрованого вмісту.

Докладніше: Контейнер перетворюють на «flex-блок» через display: flex. Його прямі нащадки стають flex-елементами й підкоряються правилам контейнера.

Подробиці

• Головна вісь: flex-direction: row (типово) або column. Поперечна вісь перпендикулярна їй.
• Вирівнювання: justify-content розподіляє вздовж головної осі (flex-start, center, space-between, space-around). align-items вирівнює впоперек (stretch, center, flex-start).
• Проміжки: gap: 1rem задає інтервали без хитрощів із полями.
• Перенесення: flex-wrap: wrap дозволяє елементам переноситися на наступний рядок.
• Ріст і стискання: flex: 1 змушує елемент зайняти вільне місце, flex: 0 0 200px задає фіксовану ширину. Повністю: flex-grow, flex-shrink, flex-basis.
• Центрування: display:flex; justify-content:center; align-items:center; центрує нащадка по горизонталі та вертикалі.
• Коли Grid? Для двовимірних сіток (рядки і стовпці одночасно) краще CSS Grid. Flexbox розрахований на один напрямок.

Див. також: CSS, медіазапити