Flexbox-колонки однакової ширини — CSS-генератор
Побудуйте flexbox-макет наочно: flex-direction, justify-content, align-items, flex-wrap і gap для контейнера, а також flex-grow, flex-shrink і flex-basis для кожного дочірнього елемента — усе з живим попереднім переглядом і готовим до копіювання CSS.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор із уже заданим flex-grow: 1 для всіх трьох блоків попереднього перегляду. Спостерігайте: замість стискатися під свій вміст, кожен блок отримує однакову частку вільного простору в рядку — ось і весь рецепт гнучких колонок однакової ширини, без відсоткових ширин, без calc(), без фіксованої піксельної математики, яку треба синхронізувати.
flex-grow: 1 наказує дочірньому елементу розтягуватися, а якщо задати його для кожного дочірнього елемента в рядку, усі вони розтягуються на однакову величину, тож опиняються однакової ширини незалежно від їхньої кількості чи вмісту всередині. Додайте або видаліть блок за допомогою елементів керування нижче, і решта колонок миттєво перерозподілиться, щоб залишатися однаковими — так само макет поводитиметься, коли користувач змінюватиме розмір вікна браузера на робочому сайті.
Це шаблон, що лежить в основі сіток карток однакової висоти, колонок таблиць цін і рівномірно розділених секцій підвалу. Дайте одній колонці більше місця, збільшивши її flex-grow відносно інших, або скопіюйте блок CSS нижче точно в згенерованому вигляді для чистого рівного розподілу.