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