skip to main content

flex-flow

css

Кратко 🔗

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

Пример 🔗

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

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

Как это понять 🔗

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

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

Как пишется 🔗

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

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

Подсказки 🔗

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

Автор: Алёна,