Генератор CSS Flexbox
Генерируйте CSS Flexbox с настройками направления, выравнивания, переноса и отступа.
Запустить инструмент
Онлайн-генератор CSS Flexbox формирует готовый фрагмент стилей для гибкой раскладки элементов на веб-странице. В интерфейсе вы настраиваете параметры контейнера: Направление раскладки, Распределение по главной оси, Выравнивание по поперечной оси, Перенос элементов на новую строку и Отступ между блоками. После запуска инструмент создаёт блок стилей со свойством `display: flex`, декларациями для позиционирования по обеим осям, управлением строками и правилом расстояния между элементами в пикселях.
Инструмент полезен при верстке шапок сайтов, карточек товаров, навигационных панелей, галерей и списков. Если вам нужно выстроить вертикальную колонку, укажите подходящий вариант в блоке Направление, а для адаптивных сеток активируйте Перенос. Введённое числовое расстояние автоматически дополняется суффиксом `px` для корректного отображения в браузере.
Сгенерированный фрагмент можно скопировать и сразу вставить в общую таблицу стилей или в атрибут `style` нужного HTML-контейнера. Проверьте поведение адаптивной сетки на экранах разной ширины и примените полученный код к блокам сайта.
Инструкция
- Задайте ориентацию раскладки в поле «Направление», указав строку или колонку.
- Укажите значение в поле «Распределение» для позиционирования элементов по главной оси.
- Укажите значение в поле «Выравнивание» для элементов по поперечной оси.
- Выберите нужный режим в поле «Перенос» для многострочной структуры контейнера.
- Введите числовое значение в поле «Отступ», чтобы задать промежуток в пикселях.
- Запустите генерацию и скопируйте сформированный CSS-код в свой проект.
Примеры
- Направление `row`, Распределение `space-between`, Выравнивание `center` и Отступ `16` формируют блок CSS с промежутком `16px` между дочерними элементами.
- Для вертикальной колонки укажите `column` в поле Направление, оставьте Распределение и Выравнивание со значением `center`, а поле Перенос оставьте без переноса строк.
Частые вопросы
Что создаёт этот генератор?
Инструмент генерирует фрагмент CSS Flexbox с `display: flex` и декларациями для ориентации, позиционирования по осям, многострочного режима и промежутка между элементами.
Какие значения используются по умолчанию?
По умолчанию генератор использует ориентацию в строку, центрирование по обеим осям, однострочный режим и числовое значение `10` для расстояния в пикселях.
Как расположить элементы вертикально?
Укажите `column` в поле Направление. Значение сразу подставляется в соответствующее правило ориентации сгенерированного CSS-кода.
В каких единицах задаётся отступ?
Числовое значение в поле Отступ выводится с суффиксом `px`, поэтому введённое число `16` преобразуется в `16px` в CSS-свойстве промежутка.