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

Основные свойства выравнивания во Flexbox

Flexbox предоставляет мощные инструменты для выравнивания элементов внутри контейнера. Основная ось (main axis) определяется свойством flex-direction, а поперечная ось (cross axis) перпендикулярна ей.

Свойства для контейнера

• justify-content — выравнивание по основной оси. Значения: flex-start, flex-end, center, space-between, space-around, space-evenly.
• align-items — выравнивание по поперечной оси для всех элементов. Значения: stretch, flex-start, flex-end, center, baseline.
• align-content — выравнивание строк при переносе (требует flex-wrap: wrap).

Свойства для элементов

• align-self — переопределяет align-items для конкретного элемента.
• margin: auto — может использоваться для прижатия элемента к краю.

Пример кода

.container {
  display: flex;
  justify-content: center; /* по центру по горизонтали */
  align-items: center;     /* по центру по вертикали */
  height: 200px;
}

.item {
  width: 100px;
  height: 100px;
}

.item.special {
  align-self: flex-end; /* этот элемент будет внизу */
}

В этом примере все элементы выравниваются по центру контейнера, но элемент с классом special будет прижат к нижнему краю.

Вывод

Flexbox идеально подходит для одномерных макетов (строки или колонки), где нужно простое и предсказуемое выравнивание. Используйте его для центрирования, распределения пространства и создания адаптивных интерфейсов без сложных расчетов.