С помощью сокращённого свойства flex можно одновременно задать коэффициенты растягивания, сжатия и базовый размер флекс-элемента.

Свойство flex состоит из трёх компонентов, которые пишутся через пробел в следующем порядке: flex-grow, flex-shrink и flex-basis. В примере ниже два правила аналогичны:

.flex-item {
  flex: 1 2 300px;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 300px;
}

Ещё у свойства flex есть особые значения: initial, auto, none. Также второй и третий компоненты необязательны. Ниже показаны различные значения свойства и их расшифровки.

flex: initial; -> flex: 0 1 auto;
flex: auto;  -> flex: 1 1 auto;
flex: none;  -> flex: 0 0 auto;
flex: 1 0;   -> flex: 1 0 0%;
flex: 1;     -> flex: 1 1 0%;

Попробуем это свойство на практике.