Как выровнять flex элементы?

Разберём выравнивание во flex по шагам, чтобы не путать свойства.

1. Определите главную ось. По умолчанию flex-direction: row, значит главная ось горизонтальная, поперечная — вертикальная. При flex-direction: column оси меняются местами.
2. justify-content управляет главной осью. При row это горизонталь: flex-start прижимает к левому краю, center собирает элементы к середине, space-between раздвигает первый и последний к краям, а остальные равномерно между ними, space-around даёт равные отступы вокруг каждого элемента.
3. align-items управляет поперечной осью, при row это вертикаль внутри ряда: flex-start прижимает элементы к верху, center выравнивает по центру по высоте, stretch растягивает элементы на всю высоту контейнера, это значение по умолчанию, из-за него элементы часто выглядят одинаковой высоты без явного указания.
4. Ваш случай: align-items: center не сработал для горизонтального выравнивания, потому что это свойство для вертикали, а не горизонтали. Нужен justify-content: center, он и соберёт элементы по центру вдоль ряда.
5. Если нужно центрирование сразу по обеим осям, укажите оба свойства одновременно, они не конфликтуют, потому что работают на разных осях независимо друг от друга.
6. Есть ещё align-self, которое переопределяет align-items для одного конкретного элемента, если остальным нужно одно выравнивание, а одному другое, не трогая весь контейнер.
7. Свойство flex-wrap на распределение по осям не влияет напрямую, но при переносе элементов на новую строку появляется ещё и align-content, которое управляет промежутком между строками.

я всегда путаю эти два свойства если честно, каждый раз гуглю заново

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

Путаница у всех одна: justify-content — это горизонталь в обычном ряду, align-items — вертикаль. Не наоборот. Пример: три карточки в ряд, хочешь чтобы они стояли по центру контейнера, а не жались к левому краю. display: flex; justify-content: center; Вот и всё, это горизонталь. Если карточки ещё и разной высоты и хочется чтобы они были на одном уровне по низу или по центру вертикально: align-items: center; Обе оси одновременно — обе строчки вместе, конфликта между ними нет, они про разные направления. Если flex-direction: column, оси меняются местами: justify-content становится вертикальным, а align-items горизонтальным, вот тут все и путаются чаще всего.