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

Основные понятия:

Flex Container: Родительский элемент, которому присваивается display: flex или display: inline-flex.
Flex Items: Дочерние элементы Flex Container.
Main Axis: Главная ось Flex Container. Определяется свойством flex-direction. По умолчанию горизонтальная (row).
Cross Axis: Побочная ось, перпендикулярная Main Axis.

Ключевые свойства для Flex Container:

display: Определяет, что элемент является flex-контейнером (flex или inline-flex).
flex-direction: Задает направление главной оси (row, row-reverse, column, column-reverse).
justify-content: Выравнивает flex-элементы вдоль главной оси (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: Выравнивает flex-элементы вдоль побочной оси (flex-start, flex-end, center, baseline, stretch).
flex-wrap: Определяет, должны ли flex-элементы переноситься на новую строку/столбец при недостатке места (nowrap, wrap, wrap-reverse).

Ключевые свойства для Flex Items:

order: Задает визуальный порядок flex-элемента (по умолчанию 0).
flex-grow: Определяет, насколько flex-элемент может увеличиваться относительно других (по умолчанию 0).
flex-shrink: Определяет, насколько flex-элемент может уменьшаться относительно других (по умолчанию 1).
flex-basis: Задает начальный размер flex-элемента до распределения свободного пространства (по умолчанию auto).
align-self: Переопределяет выравнивание flex-элемента вдоль побочной оси для отдельного элемента.

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

.container {
  display: flex;
  justify-content: center; /* Выравнивание по центру вдоль главной оси */
  align-items: center; /* Выравнивание по центру вдоль побочной оси */
  height: 200px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

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

Это позволяет легко центрировать элементы, создавать адаптивные сетки и управлять пространством между элементами.

Для чего используется flex в CSS?