flex

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

В примере ниже элемент с классом .item не будет сужаться или растягиваться. Ширина будет равна 250 пикселям.

        
          
          .container {  display: flex;}.item {  flex: 0 0 auto;  width: 250px;}
          .container {
  display: flex;
}

.item {
  flex: 0 0 auto;
  width: 250px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Короткий способ одновременно указать сразу несколько значений, сэкономив пару строк кода.

Первое значение является обязательным, остальные опциональны.

Значение по умолчанию: 0 1 auto, что расшифровывается как flex-grow: 0, flex-shrink: 1, flex-basis: auto.

Равно значению 0 0 auto:

        
          
          .element {  flex: none;}
          .element {
  flex: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Одно значение, число без единиц — flex-grow:

        
          
          .element {  flex: 2;}
          .element {
  flex: 2;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Одно значение, ширина или высота — flex-basis:

        
          
          .element {  flex: 10em;  flex: 30px;  flex: auto;  flex: content;}
          .element {
  flex: 10em;
  flex: 30px;
  flex: auto;
  flex: content;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Два значения — flex-grow и flex-basis:

        
          
          .element {  flex: 1 30px;}
          .element {
  flex: 1 30px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Два значения — flex-grow и flex-shrink:

        
          
          .element {  flex: 2 2;}
          .element {
  flex: 2 2;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Три значения — flex-grow, flex-shrink и flex-basis:

        
          
          .element {  flex: 2 2 10%;}
          .element {
  flex: 2 2 10%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Глобальные значения:

        
          
          .element {  flex: inherit;  flex: initial;  flex: unset;}
          .element {
  flex: inherit;
  flex: initial;
  flex: unset;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 С шорткатом flex стоит быть осторожным, как и со всеми прочими шорткатами. Хоть он и позволяет экономить пару строк кода, но в случае переопределения одного из значений придётся переписывать свойство целиком, повторяя остальные значения, которые не меняются. В этот момент проще было бы иметь три отдельных свойства и менять значения отдельно.