Генератор Flexbox
Налаштовуйте flex-контейнер та його елементи за допомогою візуальних інструментів, дивіться на результат наживо та копіюйте CSS в один клік.
Ваш макет створюється безпосередньо у вашому браузері. Жодні налаштування не завантажуються на BroBroGo.
Поширені запитання
Яка різниця між justify-content та align-items?
Justify-content розподіляє елементи вздовж головної осі (напрямок рядка чи стовпця), тоді як align-items вирівнює їх уздовж поперечної осі. Змініть напрямок з row на column, і осі поміняються місцями: justify-content почне працювати зверху вниз, а align-items — зліва направо.
Як працюють налаштування для окремих елементів?
Виберіть елемент за його номером, а потім налаштуйте, наскільки він розширюється (grow) для заповнення простору, стискається (shrink) при дефіциті місця, його початковий розмір (basis) та індивідуальне вирівнювання по поперечній осі. Параметр order дозволяє змінювати порядок відображення на екрані без редагування HTML. Лише змінені елементи отримають власні правила в CSS.
Коли мають значення параметри wrap та align-content?
Якщо перенесення вимкнено, всі елементи примусово розміщуються в один рядок і можуть сильно стискатися. Якщо його увімкнути, елементи, які не вміщаються, переноситимуться на наступний рядок — саме тоді починає діяти align-content, розподіляючи рядки як групу. Параметр gap задає відстань між елементами та рядками без використання margin.