Генератор CSS Flexbox

Визуально выберите свойства Flexbox-контейнера (направление, выравнивание, отступы, перенос строк) и получите соответствующий CSS-код с живым предпросмотром.

Пример:

flex-direction

justify-content

align-items

gap (px)

flex-wrap

Как это работает

Flexbox — самая используемая CSS-система раскладки для выравнивания элементов по одной оси (строке или столбцу). Этот инструмент избавляет от необходимости запоминать точные значения justify-content или align-items: настраивайте выпадающие списки и копируйте готовый блок CSS в свою таблицу стилей.

В чём разница между justify-content и align-items?

justify-content выравнивает элементы вдоль главной оси (задаётся flex-direction), а align-items — вдоль перпендикулярной оси (поперечной).

Когда нужно включать flex-wrap?

Включайте его, когда хотите, чтобы элементы переносились на следующую строку, если они не помещаются в ширину контейнера, вместо сжатия или переполнения.

Обработка 100% локально: код генерируется полностью в вашем браузере через WebAssembly.