Генератор Flexbox

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

basis — начальный размер элемента до распределения места. grow — доля свободного места, которую он заберёт, если место осталось. shrink — доля сжатия, если места не хватило. Значения по умолчанию 0, 1 и auto: элемент не растягивается, но сжимается. Короткая запись flex: 1 разворачивается в grow 1, shrink 1, basis 0%.

Из-за min-width со значением auto, которое действует на flex-элементы по умолчанию. Длинное слово или широкая картинка не дают блоку стать уже. Лечится явным min-width: 0 на элементе — это самая частая причина, по которой flex-раскладка вылезает за экран.

Flexbox раскладывает по одной оси и хорош там, где число элементов заранее неизвестно: панель кнопок, шапка, список тегов. Grid работает по двум осям сразу и нужен, когда важно совпадение колонок между строками. Практическое правило: если вы думаете «в ряд» — flex, если «таблицей» — grid.

Распределяет строки между собой, когда включён перенос и строк больше одной. При одной строке свойство не действует вообще — это регулярный источник недоумения. Не путать с align-items, который выравнивает элементы внутри своей строки.

Свойством gap, а не отступами у детей. Отступы приходится потом убирать у крайних элементов, а gap ставит промежутки только между ними. Поддерживается во всех актуальных браузерах с 2020 года и работает и в flex, и в grid.

Нет, всё собирается в браузере.