Генератор CSS Flexbox
Собирайте раскладки Flexbox наглядно: направление, перенос, justify-content, align-items, gap и растяжение элементов. Шаблоны для шапок, боковых панелей и сеток карточек. CSS, SCSS, Tailwind.
Загрузка: Генератор CSS Flexbox…
Ваши файлы не покидают устройство
Как пользоваться: Генератор CSS Flexbox
- 1
Откройте «Генератор CSS Flexbox» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Flexbox это система раскладки CSS для расположения элементов в строку или столбец: навигация, группы кнопок, карточки, центрированный контент. Её свойства мощные, но их легко перепутать. Этот генератор Flexbox позволяет менять их кнопками, видеть результат на живых блоках и копировать код.
Как собрать flex раскладку
- Начните с шаблона: горизонтально, вертикально, по центру, space between, space around, space evenly, сетка, шапка, боковая панель или сетка карточек.
- Настройте контейнер: flex-direction, flex-wrap, justify-content, align-items, align-content и gap.
- Добавляйте и удаляйте элементы, настраивайте flex-grow и размер каждого.
- Скопируйте CSS, SCSS или классы Tailwind.
Шпаргалка по Flexbox
| Свойство | Что делает |
|---|---|
| flex-direction | Главная ось: row (горизонтально) или column (вертикально) |
| justify-content | Распределение по главной оси: start, center, end, between, around, evenly |
| align-items | Выравнивание по поперечной оси: stretch, start, center, end, baseline |
| flex-wrap | Переносятся ли элементы на новую строку, когда не хватает места |
| gap | Промежуток между элементами |
| flex-grow | Насколько элемент растягивается, занимая свободное место |
Частые рецепты
- Отцентрировать что угодно: display: flex; justify-content: center; align-items: center.
- Логотип слева, меню справа: justify-content: space-between у шапки.
- Раскладка с боковой панелью: панель фиксированной ширины и основная область с flex-grow: 1.
- Переносящиеся карточки: flex-wrap: wrap с gap и минимальной шириной карточки.
Flexbox или grid?
Flexbox подходит для одного направления, например ряда кнопок или столбца полей. CSS grid нужен для двумерных раскладок, где строки и столбцы должны совпадать. Многие страницы сочетают оба подхода. Для сеток страницы смотрите генератор сеток, а для оформления блоков генераторы border-radius и box-shadow.
Частые вопросы
Как отцентрировать div с помощью Flexbox?
У родителя задайте display: flex, justify-content: center и align-items: center. Задайте родителю высоту, если нужно центрирование по вертикали в высокой области.
Чем justify-content отличается от align-items?
justify-content распределяет элементы вдоль главной оси (по горизонтали в строке), а align-items выравнивает их поперёк неё (по вертикали в строке).
Когда использовать Flexbox, а когда grid?
Flexbox для раскладок в одном направлении, например навигации и групп кнопок; grid для двумерных раскладок со строками и столбцами.
Можно ли получить классы Tailwind?
Да. Выберите экспорт Tailwind, чтобы получить утилитарные классы вроде flex, justify-between и gap-4.
Как перенести элементы на следующую строку?
Задайте контейнеру flex-wrap: wrap. Тогда элементы переходят на новую строку, когда им не хватает места.
Что делает flex-grow?
Позволяет элементу занять оставшееся свободное место. Элемент с flex-grow: 1 растягивается, а элементы со значением 0 сохраняют размер.