⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Генератор CSS Flexbox

Візуальний конструктор макета CSS flexbox: flex-direction, justify-content, align-items, flex-wrap і gap контейнера, а також flex-grow, flex-shrink і flex-basis кожного дочірнього елемента — з живим прев'ю і готовим до копіювання CSS.

Опрацювання... 0%

Результат

У flexbox-макеті два окремі зводи правил — властивості контейнера (flex-direction, justify-content, align-items, flex-wrap, gap) і властивості кожного дочірнього елемента (flex-grow, flex-shrink, flex-basis) — і саме їх плутанина найчастіше спричиняє «чому це не центрується / не росте / не переноситься, як я очікував». Цей генератор показує обидва зводи одночасно: змініть будь-який контроль контейнера або поле дочірнього елемента — і три пронумеровані кольорові блоки оновляться миттєво, тож причина і наслідок завжди на видноті.

Сторона контейнера охоплює кожну вісь макета: оберіть напрямок, вирішіть, як елементи розподіляються вздовж головної осі через justify-content, вирівняйте їх по поперечній осі, визначте, чи переносяться вони на новий рядок, і задайте gap замість хитрощів із margin. Сторона дочірніх елементів настільки ж реальна: додавайте блоки до восьми, прибирайте до двох і задайте будь-якому з них власні flex-grow, flex-shrink і flex-basis — генератор друкує CSS-правило для елемента лише тоді, коли хоч одне з них відрізняється від типового значення браузера, тож скопійований код ніколи не роздувається зайвими flex-grow: 0 там, де вони не потрібні.

Пресет-сторінки одразу ведуть до макетів, які люди шукають за назвою: як центрувати div (найпопулярніше запитання про макет у CSS, розв'язане через justify-content і align-items, обидва виставлені на center), навбар із логотипом зліва й посиланнями справа, однакові за шириною гнучкі колонки через flex-grow і порівняння space-between з найближчими родичами space-around і space-evenly.

Як і кожен інструмент на цьому сайті, генератор безкоштовний і працює повністю у вашому браузері: без завантажень, без акаунта, а після відкриття сторінки він продовжує працювати офлайн.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Контроли контейнера: flex-direction, justify-content, align-items, flex-wrap і поле gap у пікселях, застосовані до прев'ю наживо.
  • Три кольорові дочірні блоки за замовчуванням (додайте до восьми, приберіть до двох), кожен зі своїми полями flex-grow, flex-shrink і flex-basis.
  • Готовий до копіювання блок CSS: правило .flex-container плюс по одному правилу .flex-item-N для кожного елемента з нетиповими flex-властивостями.

Наші переваги

✓ Кожен контроль контейнера і кожні flex-grow, flex-shrink та flex-basis дочірнього елемента миттєво оновлюють три пронумеровані прев'ю-блоки, тож ви бачите результат ваших flexbox-правил ще до того, як торкнетесь стилів.
✓ Генератор друкує лише ті правила дочірніх елементів, які справді відрізняються від типових значень CSS, тож скопійований код лишається коротким і читабельним, а не повторює flex-grow: 0 для кожного блоку.
✓ Пресет-сторінки одразу відкривають макети, які люди шукають за назвою: центрування div, навбар із логотипом зліва й посиланнями справа та рівні за шириною гнучкі колонки — відкрийте будь-яку, і тул уже налаштований.

Сценарії використання

  • • Отримайте точний CSS для центрування div і горизонтально, і вертикально, спостерігаючи, як justify-content і align-items працюють на живих прев'ю-блоках.
  • • Зберіть навбар «логотип зліва, посилання справа» через space-between і align-items: center, а тоді скопіюйте CSS контейнера просто у ваш компонент хедера.
  • • Порівняйте space-between, space-around і space-evenly поруч на тих самих трьох блоках замість того, щоб вгадувати, який відповідає потрібним проміжкам.