Об этом инструменте
Flexbox — основа современной вёрстки CSS, но его свойства трудно запомнить, пока не увидишь их в действии. Этот генератор превращает flex-direction, justify-content, align-items, flex-wrap и gap в простые элементы управления, показывая ряд настоящих элементов, которые перестраиваются в тот же миг, как вы что-то меняете.
Это самый быстрый способ понять, как свойства взаимодействуют — а когда макет выглядит правильно, скопируйте CSS контейнера. Всё работает в браузере.
Частые вопросы
Этот инструмент создаёт CSS для контейнера или для отдельных элементов?
Он генерирует flex-свойства родительского контейнера (flex-direction, justify-content, align-items, flex-wrap, gap) — свойства отдельных элементов, такие как flex-grow или order, не охватываются.
В чём разница между justify-content и align-items?
justify-content управляет распределением по главной оси (по горизонтали при направлении row), а align-items управляет выравниванием по поперечной оси (по вертикали при row).
Нужны ли вендорные префиксы для flexbox в современных проектах?
Нет, все современные браузеры поддерживают свойства flexbox без префиксов; старый синтаксис -webkit-box / -ms-flexbox нужен только браузерам старше десяти лет.
Отправляются ли куда-то данные моей раскладки?
Нет. Предпросмотр и сгенерированный CSS работают полностью в вашем браузере — ничего не отправляется на сервер.
Почему значения gap не работают в некоторых старых браузерах?
Свойство gap внутри flex-контейнеров поддерживается всеми браузерами, выпущенными после 2021 года; для более старых браузеров используйте отступы (margin) на элементах.