flex

Короткая запись для управления размерами флекс-элемента.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство-шорткат, с помощью которого можно указать значение трёх свойств одновременно: 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 стоит быть осторожным, как и со всеми прочими шорткатами. Хоть он и позволяет экономить пару строк кода, но в случае переопределения одного из значений придётся переписывать свойство целиком, повторяя остальные значения, которые не меняются. В этот момент проще было бы иметь три отдельных свойства и менять значения отдельно.

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline