Генератор Flexbox

Как это работает

Flexbox не сложен, но в одном почти все ошибаются: justify-content и align-items не означают «по горизонтали» и «по вертикали». Они означают «вдоль направления» и «поперёк него», а направление вы задаёте сами.

Ловушка, сказанная прямо

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

Главная и поперечная ось

Главная ось — та, вдоль которой располагаются элементы; она задаётся flex-direction. Поперечная ось перпендикулярна ей. justify-content распределяет пространство вдоль главной оси; align-items размещает элементы по поперечной оси. Когда эти два названия закрепятся, остальное встанет на места.

gap и почему он заменил отступы

gap ставит пространство между элементами, не добавляя его снаружи перед первым и после последнего, — именно в этом ошибаются отступы, и именно это раньше исправляли хаками с :last-child. Он поддерживается во всех современных браузерах, и больше нет причин его избегать.

nowrap означает сжатие, а не переполнение

По умолчанию стоит nowrap, и элементы сжимаются меньше своего естественного размера, чтобы уместиться, а не переходят на новую строку. Поэтому текст иногда неожиданно сжимается внутри строки flex. Значение wrap позволяет элементам переходить вниз; min-width: 0 у дочернего элемента не даёт ему сжиматься меньше своего содержимого.

Центрирование в обоих направлениях

justify-content: center вместе с align-items: center центрирует элемент в обоих направлениях независимо от flex-direction — это единственное сочетание, которое стоит выучить наизусть.