Към съдържанието

CSS Flexbox генератор

Създайте CSS Flexbox оформления визуално с преглед на живо. Коригирайте посока, justify-content, align-items, wrap и gap. Копирайте CSS кода. Безплатен онлайн инструмент.

Преглед

CSS изход
 

Какво е CSS Flexbox?

CSS Flexible Box Layout (Flexbox) е едномерен метод за оформление за подреждане на елементи в редове или колони. Елементите се разтягат (разширяват) за запълване на допълнително пространство или се свиват за побиране в по-малки пространства. Улеснява проектирането на гъвкави, отзивчиви структури.

Ключови Flexbox свойства

flex-direction задава посоката на главната ос. justify-content подравнява елементите по главната ос. align-items подравнява елементите по напречната ос. flex-wrap контролира дали елементите се пренасят на нови редове. gap задава разстоянието между елементите.

Поверителност

Цялото генериране на flexbox работи 100% във вашия браузър. Никакви данни не се изпращат на сървър.