Как свойства flex-direction и flex-wrap влияют на расположение элементов в контейнере?

Свойство flex-direction указывает направление главной оси, вдоль которой укладываются flex-элементы в контейнере. html5book.ru webref.ru Элементы могут располагаться по двум основным направлениям — как строки по горизонтали или как столбцы по вертикали. webref.ru

Некоторые значения свойства и их влияние на расположение элементов:

• row (по умолчанию) — элементы располагаются в ряд слева направо. html5book.ru webref.ru
• row-reverse — элементы выкладываются в ряд справа налево. html5book.ru webref.ru
• column — элементы располагаются в колонку сверху вниз. html5book.ru webref.ru
• column-reverse — элементы выкладываются в колонку снизу вверх. html5book.ru webref.ru

Свойство flex-wrap определяет, будет ли flex-контейнер однострочным или многострочным, а также задаёт направление поперечной оси, определяющее направление укладки новых линий контейнера. html5book.ru

Некоторые значения свойства и их влияние на расположение элементов:

• nowrap (по умолчанию) — элементы не переносятся, а располагаются в одну линию слева направо. html5book.ru
• wrap — элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо. html5book.ru
• wrap-reverse — элементы переносятся на новые линии, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх. html5book.ru