Редактор Flexbox

Что такое визуальный редактор Flexbox?#

Flexbox — это CSS-движок раскладки для размещения элементов вдоль одного направления (строки или колонки) и распределения свободного места между ними. Он отвечает на вопросы, прежде требовавшие обтеканий, отрицательных отступов и метода проб и ошибок: «как отцентрировать это по вертикали?», «как сделать эти три колонки равной высоты?», «как сдвинуть один элемент вправо, а остальные оставить слева?». Разобравшись, вы используете его почти на каждой странице; до этого момента имена свойств (justify-content, align-items, flex-grow) спотыкают даже опытных разработчиков, потому что спецификация перегружает обычные английские слова очень точным раскладочным смыслом.

Эта страница — живая Flexbox-площадка. Вы настраиваете свойства контейнера и индивидуальные переопределения элементов на левой боковой панели; правая панель мгновенно показывает результат и выписывает точный, готовый к вставке CSS, который его породил. Смысл — перестать гадать, какое значение что делает, и вместо этого видеть эффект в момент изменения, а затем копировать сработавшее правило.

Как пользоваться#

Раскладка разделена на боковую панель управления и панель превью + вывод CSS.

1. Настройте контейнер. Используйте выпадающие списки на боковой панели:
   • Направление — row, row-reverse, column, column-reverse.
   • Justify content — распределяет свободное место по главной оси: flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align items — выстраивает потомков по поперечной оси: stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap держит всё на одной линии; wrap и wrap-reverse позволяют потомкам переходить на новые линии.
   • Align content — появляется только при включённом переносе; разделяет линии обёрнутых потомков.
   • Отступ — ползунок от 0 до 64 px; живое значение читается рядом с подписью.
2. Управляйте элементами. Под заголовком Элементы кнопка Добавить элемент вставляет ещё одного flex-потомка. В строке каждого элемента доступны grow, shrink, basis, order и align-self (построчное переопределение контейнерного align-items). Удалите потомка его кнопкой удаления.
3. Следите за превью. Большой блок справа — настоящий flex-контейнер; каждое изменение перерисовывается мгновенно.
4. Копируйте CSS. Сгенерированный блок правил лежит под превью. Нажмите Копировать, чтобы забрать его. Когда все элементы разделяют одни значения, выдаётся единый блок .item; как только любой элемент отличается, вывод переключается на по одному блоку .item:nth-child(N) на каждого потомка, чтобы каждое переопределение оставалось однозначным.

Ключевые возможности#

• Свойства контейнера и каждого потомка в одном месте. Ничто в Flexbox не скрыто — flex-direction, обе оси выравнивания, перенос, gap и поденные grow/shrink/basis/order/align-self всё живое.
• Корректный, минимальный вывод CSS. align-content выдаётся только когда перенос реально включён (на одной линии он ничего не делает); равные элементы схлопываются в один блок; order и align-self появляются только при нестандартных значениях. Вывод — кратчайшее правило, воспроизводящее то, что вы видите.
• Шортхенд flex сделан правильно. Каждый потомок сериализуется как flex: <grow> <shrink> <basis> — каноническая трёхзначная форма, избегающая неожиданных умолчаний пропущенных значений шортхенда.
• Basis проходит проверку. Введите auto, 0, 200px, 50% или 10rem — значение принято; недопустимый basis помечается и откатывается к auto, а не молча плодит битый CSS.
• Превью принудительно слева направо. row Flexbox определён как LTR-семантика, поэтому превью зафиксировано как LTR независимо от языка страницы — что видите, то и сделает таблица стилей.

Разбор примера#

Частая раскладка: строка заголовка с логотипом, прижатым влево, заголовком, занимающим оставшееся место, и кнопкой действия, прижатой вправо, — равномерно с фиксированным отступом.

• Направление: row
• Justify content: space-between
• Align items: center
• Wrap: nowrap
• Отступ: 16px
• Элементы: три потомка, у среднего grow 1, чтобы он впитал свободное место, остальные со стандартным flex: 0 1 auto.

Сгенерированный CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Поскольку второй потомок растёт, а остальные — нет, вывод корректно использует три отдельных блока nth-child. Бросьте это в любой проект, и логотип прижмётся к левому краю, действие — к правому, а заголовок заполнит середину: никаких обтеканий, никаких отступов.

FAQ#

justify-content против align-items — что есть что?#

justify-content всегда работает вдоль главной оси (направления, которое задаёт flex-direction — горизонтального при row, вертикального при column). align-items всегда работает вдоль поперечной оси (перпендикулярной главной). Поэтому при row justify-content управляет интервалами слева/справа, а align-items — выравниванием сверху/снизу. Переключите направление в column, и они поменяются ролями. Запомнить «justify = главная, align = поперечная» избавляет от самой частой путаницы с Flexbox.

Когда flex-grow реально что-то делает?#

Только когда есть свободное место, которое впитать. Если у трёх потомков flex-grow: 1 и контейнер шире, чем нужно потомкам, остаток места делится на три и добавляется поровну. Если контейнер заполнен точно, ничего не растёт. Задайте flex-grow: 0 (по умолчанию), и потомок отказывается расширяться, уступая место сиблингам. flex-shrink — зеркало: он решает, кто первым уступает место, когда его не хватает.

Почему мой gap не появляется?#

Три обычные причины: у потомков фиксированная ширина, полностью заполняющая контейнер (нет места под отступы); flex-wrap: nowrap принуждает потомков переполнять контейнер вместо перехода в раскладку с отступами; либо отступ на потомках визуально маскирует gap. Ползунок здесь доходит до 64 px; если нужно больше, базовое свойство принимает любую длину — скопируйте CSS и поднимите gap в собственном файле.

В выводе используется nth-child — можно использовать класс?#

Конечно. Селекторы .item:nth-child(N) выдаются потому, что они однозначно сопоставляются превью, когда элементы различаются. В реальном коде замените их собственными классами (.logo, .title, .action) — декларации внутри остаются идентичны. Когда каждый потомок совпадает, инструмент и так выдаёт единый общий блок .item, который можно переименовать в одном месте.