Типичные ошибки
Ошибка 1: align-items не виден — у контейнера нет высоты
Самая частая жалоба: «align-items: center ничего не делает». Чаще всего у контейнера
высота равна высоте элементов, и центрировать нечего. Дайте контейнеру высоту.
❌ нет высоты — эффекта не видно
A
B
✅ есть высота — центрирование заметно
A
B
/* нужна высота, иначе align-items не на чем работать */
.row { display: flex; min-height: 90px; align-items: center; }Ошибка 2: писать свойства flex-container на flex-item.
align-items, justify-content, gap ставятся на родителя;
align-self и flex — на ребёнка. Перепутали уровень — правило молча игнорируется.Ошибка 3: путать
align-items и align-content.
align-content работает только при переносе (flex-wrap: wrap) и нескольких
строках; в одну строку оно ничего не делает — используйте align-items.Ошибка 4: забыть, что
flex-direction: column меняет
main axis и cross axis местами — тогда justify-content двигает по вертикали, а align-items — по горизонтали.Ошибка 5: смешивать margin-хаки с
gap — промежутки
складываются и становятся непредсказуемыми. Выберите что-то одно (предпочтительно gap).Диагностика: включите Flexbox overlay в DevTools (значок «flex» рядом
с элементом) — браузер подсветит оси и промежутки
gap, и сразу видно, что и куда выравнивается.