Направление расположение flex-элементы в flex-контейнере определяется посредством осей.
В CSS Flexbox имеются две оси. Первая ось называется главной (по умолчанию она направлена слева направо). Вторая - поперечная (по умолчанию направлена сверху вниз), она всегда перпендикулярно главной. Главная ось задаёт основное направление flex-элементов во flex-контейнере, а поперечная ось определяет их направление при переносе на новую линию.
По умолчанию элементы во flex-контейнере располагаются вдоль направления главной оси (т.е. слева направо) на одной линии.
Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction.
flex-direction: row;
/* row (слева направо) - по умолчанию
row-reverse (справа налево)
column (сверху вниз)
column-reverse (снизу вверх) */
С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns). Осуществляется это с помощью значения column или column-reverse.
По умолчанию flex-элементы не переносятся на новую линию, даже когда им не хватает места в текущей линии. Они просто выходят за её пределы.
Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse.
flex-wrap: wrap;
/* nowrap (только на одной линии - по умолчанию)
wrap (разрешить перенос flex-элементов на новые линии)
wrap-reverse (осуществлять перенос flex-элементов в обратном порядке) */
СЗначения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси.
ССвойства flex-direction и flex-wrap можно указать с помощью универсального CSS свойства flex-flow:
flex-flow: row nowrap; /* 1 значение - flex-direction, 2 значение - flex-wrap */