Генератор Flexbox

Flexbox раскладывает элементы вдоль одной оси и сам делит между ними свободное место. Путаница в нём почти всегда об одном: какая ось считается главной. При direction row главная ось горизонтальная, и justify-content раздвигает элементы влево-вправо, а align-items прижимает их по вертикали. Стоит поставить column, и обе роли меняются местами.

Инструмент показывает это наглядно: вы меняете направление, и подписи у выравнивания переезжают. Кроме выравнивания настраиваются перенос строк, отступы между элементами и поведение каждого блока по отдельности — насколько он готов растягиваться и сжиматься. Готовый код собирается сразу и вставляется в стили без правки.

Свойство flex у элемента — это три числа в одном: способность расти, способность сжиматься и базовый размер. Запись flex: 1 означает, что блок разделит свободное место поровну с такими же соседями. Запись flex: 0 0 200px делает блок ровно двухсотпиксельным и запрещает ему меняться.

Начните с направления оси, дальше выберите выравнивание. Если элементы должны разъехаться по краям, берите space-between; если сгруппироваться по центру — center с заданным gap. Перенос включайте, когда блоков много и они не обязаны помещаться в одну строку: без wrap flex сожмёт их до нечитаемого размера.

Частая ошибка — забыть min-width: auto. По умолчанию flex-элемент не сжимается уже своего содержимого, поэтому длинное слово или таблица внутри распирают всю раскладку. Лечится правилом min-width: 0 на элементе. Для раскладки сразу по двум осям берите генератор Grid, а перевести размеры в относительные единицы поможет конвертер CSS-единиц. Отдельная тонкость — свойство align-content: оно управляет тем, как распределяются строки при переносе, и работает только когда строк больше одной. Его регулярно путают с align-items, и от этого выравнивание в многострочном флексе ведёт себя неожиданно.