Flex 1 css что это

flex: 1 — это сокращенная запись для установки значений свойств flex-grow, flex-shrink и flex-basis для флекс-элемента в CSS.

flex-grow определяет, насколько широко (в пикселях или процентах) флекс-элемент может расти внутри флекс-контейнера, когда имеется свободное пространство. При задании flex-grow: 1 элемент будет растягиваться на всё свободное пространство внутри контейнера.

flex-shrink определяет, насколько узко (в пикселях или процентах) флекс-элемент может сжиматься внутри флекс-контейнера, если доступное пространство недостаточно. При задании flex-shrink: 1 элемент будет сжиматься так, чтобы помещаться в контейнер.

flex-basis задает базовый размер флекс-элемента перед вычислением flex-grow или flex-shrink. Если вы устанавливаете flex-basis на 0, то флекс-элемент будет настраиваться на размер содержимого внутри него.

С помощью сокращенной записи flex: 1 мы можем установить значение всех трех свойств flex-grow, flex-shrink и flex-basis:

.flex-item {
  flex: 1;
}

Этот код устанавливает значение свойства flex: 1 для флекс-элемента с классом .flex-item, что означает, что элемент будет растягиваться на всё свободное пространство, сжиматься по мере необходимости и иметь базовый размер равный 0.

Использование flex: 1 может быть полезно для создания адаптивных макетов, где элементы должны растягиваться и сжиматься в зависимости от доступного пространства на странице.