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

Однакові за шириною колонки Flexbox — генератор CSS

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

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

Результат

Ця сторінка відкриває генератор із уже виставленим flex-grow: 1 для всіх трьох прев'ю-блоків. Подивіться: замість того, щоб стискатися під свій вміст, кожен блок забирає однакову частку вільного місця в рядку — це і є весь рецепт однакових за шириною гнучких колонок, без відсоткової ширини, calc() чи пікселів, які треба тримати синхронізованими.

flex-grow: 1 каже дочірньому елементу рости, а виставлення цього значення на кожному елементі в рядку означає, що всі вони ростуть однаково, тож у підсумку мають однакову ширину незалежно від їхньої кількості чи вмісту всередині. Додайте або приберіть блок контролами нижче — і решта колонок миттєво перерозподіляться, щоб лишитися рівними; так само поводиться і реальна сторінка при зміні ширини вікна браузера.

Це той самий патерн, що стоїть за сітками карток однакової висоти, колонками таблиць тарифів і рівномірно поділеними секціями футера. Дайте одній колонці більше місця, піднявши її flex-grow вище за інші, або скопіюйте блок CSS нижче точно як він згенерований — для чистого рівного поділу.

🛡️
Локальна безпека (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 поруч на тих самих трьох блоках замість того, щоб вгадувати, який відповідає потрібним проміжкам.