За что отвечают свойства justify-content и align-items у контейнера flexbox?

В Flexbox контейнере свойства justify-content и align-items отвечают за выравнивание дочерних элементов, но по разным осям:

• justify-content управляет выравниванием элементов по главной оси (main axis), которая по умолчанию горизонтальная. Оно определяет, как распределяется свободное пространство между и вокруг элементов.

  Примеры значений:

  • flex-start — элементы прижаты к началу контейнера.
  • center — элементы центрированы.
  • space-between — равномерный промежуток между элементами.

• align-items управляет выравниванием элементов по поперечной оси (cross axis), обычно вертикальной.

  Примеры значений:

  • stretch (по умолчанию) — элементы растягиваются на всю высоту контейнера.
  • center — элементы выравниваются по центру по вертикали.
  • flex-start — элементы прижаты к верхнему краю.

Таким образом, эти свойства позволяют гибко управлять расположением элементов внутри flex-контейнера.