Генератор Flexbox
Настраивайте flex-контейнер и его элементы с помощью визуальных элементов управления, наблюдайте за изменениями в реальном времени и копируйте CSS в один клик.
Макет создается прямо в вашем браузере. Никакие заданные вами параметры не отправляются на BroBroGo.
Частые вопросы
В чем разница между justify-content и align-items?
Свойство justify-content распределяет элементы вдоль главной оси (в направлении строки или колонки), а align-items выравнивает их по поперечной оси. При изменении направления с row на column оси меняются местами: justify-content начинает работать сверху вниз, а align-items — слева направо.
Как работают настройки для отдельных элементов?
Выберите элемент по его номеру, а затем настройте параметры: насколько он увеличивается при наличии свободного места (grow), сжимается при недостатке пространства (shrink), его исходный размер (basis) и индивидуальное выравнивание по поперечной оси. Свойство order позволяет визуально переместить элемент вперед или назад без изменения HTML-кода. В итоговый CSS-код попадут только те элементы, параметры которых вы изменили.
Когда важны свойства wrap и align-content?
Если перенос выключен, все элементы принудительно выстраиваются в одну линию и могут сильно сжиматься. При включении переноса элементы, которые не помещаются, переходят на следующую строку — именно тогда вступает в силу свойство align-content, управляющее распределением рядов. Свойство gap задает расстояние между элементами и строками без использования внешних отступов (margin).