Flexbox одномерен: контейнер выбирает главную ось, а поперечная проходит перпендикулярно. В row главная ось следует строке, в column — блочному направлению. Этот выбор меняет видимый смысл justify-content и align-items, поэтому сначала определяйте ось, а не запоминайте «горизонтально» и «вертикально».
Распределяйте по главной оси
justify-content размещает группу, когда осталось положительное свободное место. flex-start и flex-end прижимают к краю, center делит остаток, а space-* распределяют его между элементами или вокруг них. Эти значения не задают ширину. Сначала рассчитываются grow, basis, содержимое и контейнер, и только оставшееся место получает justify-content. Переключите row и column, чтобы увидеть движение правила вместе с осью.
Отличайте элементы от перенесённых линий
align-items размещает элементы внутри каждой flex-линии по поперечной оси, а align-self переопределяет его для одного элемента. align-content распределяет целые линии и не проявляется в однострочном nowrap. Для проверки выберите wrap, задайте достаточный basis для нескольких линий и оставьте место по поперечной оси. Gap разделяет соседние строки и колонки, но не создаёт отступ у края контейнера.
Проверьте реальный компонент
FlexWeave отображает проверенную визуальную модель текущим браузером, но не знает ваше содержимое, режим письма, фокусируемые элементы и диапазон ширин. Вставьте правила в реальный компонент, сохраните осмысленный порядок HTML и проверьте узкие экраны, масштаб, длинные переводы, клавиатуру и вспомогательные технологии. Обратное направление и order не подтверждают правильное чтение. Храните принятые CSS и HTML в системе контроля версий: капсула намеренно не сохраняет проект.