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