Что использовать для выравнивания Flex элементов

Flexbox предоставляет несколько свойств для выравнивания элементов:

1. justify-content – выравнивание по главной оси (горизонтально для flex-direction: row):
   • flex-start (по умолчанию)
   • flex-end
   • center
   • space-between
   • space-around
   • space-evenly

2. align-items – выравнивание по поперечной оси (вертикально для flex-direction: row):

   • stretch (по умолчанию)
   • flex-start
   • flex-end
   • center
   • baseline

3. align-self – индивидуальное выравнивание для отдельного элемента (переопределяет align-items).

Пример:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  align-self: flex-end;
}