flex-flow

Шорткат, позволяющий одновременно задать значения свойствам 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-direction
• flex-wrap

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