Flexbox колони с еднаква ширина — CSS генератор
Изградете визуално оформление на CSS flexbox: flex-direction, justify-content, align-items, flex-wrap и gap върху контейнера, плюс flex-grow, flex-shrink и flex-basis за всяко дете, всички с предварителен преглед на живо и копируем CSS.
Резултат
Тази страница отваря генератора с flex-grow: 1, който вече е зададен и на трите полета за визуализация. Watch them: instead of shrinking to fit their content, every box claims an identical share of the leftover space in the row, which is the whole recipe for equal-width flexible columns — no percentage widths, no calc(), no fixed pixel math to keep in sync.
flex-grow: 1 казва на дете да расте и задаването му за всяко дете в реда означава, че всички растат с една и съща сума, така че в крайна сметка имат еднаква ширина, независимо от това колко са или какво съдържание се намира вътре в тях. Добавете или премахнете кутия с контролите по-долу и останалите колони незабавно се преразпределят, за да останат равни — преоразмерете прозорец на браузър върху това оформление в производствената среда и той ще се държи по същия начин.
Това е моделът зад решетки с карти с еднаква височина, колони с ценови таблици и равномерно разделени секции в долния колонтитул. Дайте на една колона повече място, като повдигнете нейния flex-grow над останалите или копирайте CSS блока по-долу точно както е генериран за чисто равно разделяне.