Как пользоваться: Генератор CSS Flexbox
- Выберите пресет — центрирование, навбар, карточки с переносом, боковая панель, стек — или начните с нуля.
- Настройте контейнер: flex-direction, flex-wrap, justify-content (главная ось), align-items (поперечная ось) и gap.
- Нажмите на элемент, чтобы задать его flex-grow, shrink, basis, order и align-self; используйте + Add item или Remove, чтобы изменить их количество.
- Измените размер контейнера, чтобы проверить поведение, и скопируйте CSS, HTML или классы Tailwind.
Две оси flexbox
Flexbox располагает элементы вдоль главной оси (задаётся flex-direction) и поперечной оси, перпендикулярной ей. justify-content распределяет элементы по главной оси, а align-items выравнивает их по поперечной. Если переключить на column, оси поменяются местами, поэтому для центрирования по вертикали иногда нужен justify-content, а иногда align-items.
flex: grow shrink basis
| Сокращение | Значение | Когда использовать |
|---|---|---|
flex: 1 | 1 1 0% | Равные колонки, которые делят пространство |
flex: auto | 1 1 auto | Рост от собственного размера содержимого |
flex: none | 0 0 auto | Фиксированные элементы, например логотип или иконка |
flex: 1 1 240px | Старт с 240px, затем рост или сжатие | Сетки карточек с переносом |
margin-left: auto на одном элементе отодвигает его и всё следующее за ним к дальнему краю — классический способ прижать кнопку «Войти» вправо в навбаре. Для двумерных макетов, где нужны строки и столбцы, лучше подходит CSS Grid Generator.
Также ищут как: генератор flexbox, css flexbox generator, flexbox playground, flexbox онлайн, justify-content generator, align-items css, генератор flex-макетов, tailwind flex generator.
Инструменты, которые хорошо сочетаются с Генератор CSS Flexbox
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Конвертер CSS в Tailwind — Вставьте правила или объявления CSS и получите эквивалентные утилитарные классы Tailwind для каждого селектора, включая состояния hover: и произвольные значения, например p-[13px].
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
Часто задаваемые вопросы
Как отцентрировать div с помощью flexbox?
Задайте родителю display: flex; justify-content: center; align-items: center; и укажите высоту. Чтобы увидеть результат, выберите пресет «Центрировать что угодно».
В чём разница между justify-content и align-items?
justify-content располагает элементы вдоль главной оси (по горизонтали в строке), align-items — вдоль поперечной оси (по вертикали в строке). При flex-direction: column они меняются местами.
Почему мои flex-элементы не переносятся?
По умолчанию flex-wrap имеет значение nowrap, поэтому элементы сжимаются, чтобы поместиться в одну строку. Установите flex-wrap: wrap и задайте элементам flex-basis или min-width, чтобы у них был размер, по которому происходит перенос.
Flexbox или grid?
Flexbox подходит для одного направления за раз: навбары, панели инструментов, центрирование, ряды карточек. Grid нужен, когда строки и столбцы должны выравниваться между собой, например в макетах страниц и дашбордах.
Можно ли установить Генератор CSS Flexbox как веб-приложение и пользоваться им офлайн?
Да. Генератор CSS Flexbox — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.