flex-flow

Короткая запись для свойств переноса и направления.

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

Кратко

Скопировано

Шорткат, позволяющий одновременно задать значения свойствам flex-direction и flex-wrap.

Пример

Скопировано

В примере ниже флекс-контейнеру устанавливается значение column для свойства flex-direction и значение wrap для свойства flex-wrap.

        
          
          .container {  display: flex;  flex-flow: column wrap;}
          .container {
  display: flex;
  flex-flow: column wrap;
}

        
        
          
        
      

Как понять

Скопировано

У флексбоксов множество свойств. Это приводит к необходимости сокращать код. Шорткаты дают возможность указывать в одну строку сразу несколько значений для нескольких свойств.

Шорткат flex-flow объединил в себе свойства, связанные с потоком внутри флекс-контейнера.

Как пишется

Скопировано

Важно соблюдать порядок значений: сначала значение для flex-direction, затем для flex-wrap. Ключевые слова указываются через пробел.

Доступные значения можно посмотреть в статьях, посвящённых соответствующим свойствам:

Подсказки

Скопировано

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

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