Как задать свойства flexbox?

Задаются свойства контейнеру (элементу, к которому применяется display: flex или display: inline-flex) и его прямым потомкам (элементам внутри контейнера).

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

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

Свойства для элементов (прямых потомков flex-контейнера):

• order: Определяет порядок расположения элемента внутри контейнера. По умолчанию все элементы имеют order: 0. Элементы с меньшим значением order располагаются раньше.
• flex-grow: Определяет, во сколько раз элемент может увеличиваться относительно других элементов в случае наличия свободного пространства. По умолчанию 0 (не увеличивается).
• flex-shrink: Определяет, во сколько раз элемент может уменьшаться в случае недостатка пространства. По умолчанию 1 (уменьшается).
• flex-basis: Задает начальный размер элемента до распределения свободного пространства. Может быть задано в пикселях, процентах или auto. По умолчанию auto.
• flex: Сокращенное свойство для flex-grow, flex-shrink и flex-basis. Например, flex: 1 1 auto;.
• align-self: Переопределяет значение align-items для отдельного элемента. Возможные значения: auto (использует значение align-items родителя), stretch, flex-start, flex-end, center, baseline.

Пример:

.flex-container {
  display: flex; /* Делаем элемент flex-контейнером */
  flex-direction: row; /* Располагаем элементы в ряд */
  justify-content: center; /* Выравниваем элементы по центру главной оси */
  align-items: center; /* Выравниваем элементы по центру поперечной оси */
  gap: 10px; /* Задаем расстояние между элементами */
}

.flex-item {
  flex-grow: 1; /* Элемент может увеличиваться */
  flex-basis: 100px; /* Начальный размер элемента */
}

.special-item {
  order: -1; /* Этот элемент будет расположен первым */
  align-self: flex-end; /* Переопределяем выравнивание по поперечной оси для этого элемента */
}