Что такое flexbox и как он работает в CSS
Что проверяют
Понимаете ли вы модель осей и знаете ли главную ловушку с переполнением.
Как отвечать
Это модель одномерной раскладки: элементы располагаются вдоль одной оси, а свободное пространство между ними распределяется по правилам. Для двумерных сеток есть отдельный механизм.
Всё строится вокруг двух осей. Главная задаётся направлением, поперечная перпендикулярна ей. Важно, что при смене направления на вертикальное оси меняются местами, и свойства выравнивания начинают работать наоборот. Это первое, что путают.
Свойства контейнера: включение режима, направление, распределение по главной оси, выравнивание по поперечной, перенос на новые строки, промежуток между элементами.
Свойства элементов: способность расти, способность сжиматься и базовый размер. Их сокращённая запись со значением единица означает, что элемент занимает свободное место, начиная с нулевого базового размера, из-за чего элементы получаются одинаковыми независимо от содержимого. Это отличается от варианта, где базовым размером служит содержимое. Плюс индивидуальное выравнивание и изменение визуального порядка.
Главная ловушка, о которой стоит рассказать: элемент не сжимается меньше своего содержимого. Причина в том, что минимальный размер по умолчанию вычисляется по содержимому. Отсюда классическая ситуация, когда длинное слово или таблица внутри растягивают контейнер и ломают раскладку. Лечится обнулением минимального размера у элемента, и это, пожалуй, самое полезное практическое знание про эту модель.
Ещё две детали: промежуток предпочтительнее отступов, потому что не добавляет лишнего с краю, а изменение визуального порядка не меняет порядок в разметке, поэтому чтение с клавиатуры и программой чтения с экрана пойдёт по исходному порядку. Это проблема доступности.
Где спотыкаются
Путают оси после смены направления.
Не знают про минимальный размер по содержимому и борются с переполнением подпорками.
Используют изменение порядка вместо правильной разметки.
Берут одномерную модель для двумерной сетки.