Для чего используется Flexbox?

Flexbox используется для создания гибких и адаптивных макетов в CSS. Он позволяет легко выравнивать и распределять элементы внутри контейнера, автоматически регулируя их размеры и положение в зависимости от доступного пространства.

Основные концепции Flexbox:

• Flex-контейнер: Элемент, к которому применяется display: flex; или display: inline-flex;. Он содержит flex-элементы.
• Flex-элементы: Непосредственные потомки flex-контейнера.

Flexbox позволяет контролировать:

• Направление расположения элементов (flex-direction).
• Перенос элементов на следующую строку/столбец (flex-wrap).
• Выравнивание элементов вдоль главной оси (justify-content).
• Выравнивание элементов вдоль поперечной оси (align-items для отдельных элементов и align-content для нескольких строк/столбцов).
• Порядок отображения элементов (order).
• Распределение свободного пространства между элементами (flex-grow, flex-shrink, flex-basis).

Пример базового использования:

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

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>