Генератор Flexbox

Експериментуйте з напрямком згинання, обертанням, вирівнюванням і вирівнюванням. Перегляньте оновлення макетів елементів, а потім скопіюйте CSS контейнера.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

Експериментуйте зі змінним напрямком, обтіканням, вирівнюванням і вирівнюванням — дивіться оновлення макетів у реальному часі.
Запускається у вашому браузері
Безкоштовне використання

Як користуватися

Установіть напрямок згинання та оберніть.
Налаштуйте вирівнювання вмісту та вирівнювання елементів.
Скопіюйте CSS Flexbox.

How this tool works

Установіть напрямок згинання та оберніть.
Налаштуйте вирівнювання вмісту та вирівнювання елементів.
Скопіюйте CSS Flexbox.

Recommended settings

Спочатку скористайтеся параметрами за замовчуванням, а потім відкоригуйте, якщо потрібно

Supported formats

Text / on-page input

File size and limits

Дуже складні багатошарові попередні перегляди можуть працювати повільніше на старих телефонах.

Privacy

Генератори кольорів і CSS повністю працюють у вашому браузері. Попередній перегляд і конверсія ніколи не завантажують ваші стилі.

Common use cases

Використовуйте Flexbox Generator, коли вам потрібно: експериментуйте з напрямком згинання, обертайте, вирівнюйте та вирівнюйте — дивіться оновлення макетів у реальному часі.

Troubleshooting

Після вставлення попередній перегляд виглядає інакше

Перевірте наявність конкуруючих CSS на вашій сторінці (скидання, успадковані кольори). Спершу скопіюйте згенероване правило в ізольовану таблицю стилів.

FAQ

Це завантажує мій CSS?

Ні. Генератори та конвертери працюють у вашому браузері з попереднім переглядом.

Чи потрібен мені обліковий запис?

Ні. Відкрийте інструмент, налаштуйте елементи керування та скопіюйте CSS.