Генератор CSS Flexbox: візуальний конструктор розмітки

Flexbox: одновимірне компонування

Flexbox (Flexible Box Layout) — CSS-модуль для одновимірного компонування: розміщення елементів у рядку або стовпці. Він чудово підходить для навігаційних меню, карточок, вирівнювання елементів по центру та розподілу простору між елементами. На відміну від Grid, Flexbox оперує одним напрямком за раз.

Основні властивості контейнера

display: flex — активує flex-контейнер. flex-direction: row (ліворуч направо), row-reverse, column (зверху вниз), column-reverse. justify-content: вирівнювання по головній осі (flex-start, flex-end, center, space-between, space-around, space-evenly). align-items: вирівнювання по поперечній осі (stretch, flex-start, flex-end, center, baseline).

Властивості flex-елементів

flex-grow: скільки вільного простору займає елемент (0 = не розтягується). flex-shrink: чи може елемент стискатися (1 = так). flex-basis: базовий розмір елемента. Скорочена форма: flex: 1 = flex: 1 1 0%. align-self: індивідуальне вирівнювання конкретного елемента. order: зміна порядку відображення без зміни HTML.

Flexbox vs Grid

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