Задаются свойства контейнеру (элементу, к которому применяется 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.Пример:
css