Выравнивание элементов во Flex контейнере
Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.
Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items . Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство justify-content .
На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.
Свойства управления выравниванием
В этом руководстве рассматриваются следующие свойства:
- justify-content — управляет выравниванием элементов по главной оси.
- align-items — управляет выравниванием элементов по перекрёстной оси.
- align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
- align-content — описывается в спецификации как «упаковка flex строк»; управляет промежутками между flex строками по перекрёстной оси.
Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.
Примечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.
Перекрёстная ось
Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column .
Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.
Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch .
Другие возможные значения свойства:
- align-items: flex-start
- align-items: flex-end
- align-items: center
- align-items: stretch
- align-items: baseline
В примере ниже значение свойств align-items установлено в stretch . Попробуйте другие значения для понимания их действия.
Выравнивание одного элемента при помощи align-self
Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items , а так же значение auto , которое сбросит значение, установленное в flex контейнере.
В следующем примере, у flex контейнера установлено align-items: flex-start , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch ; у следующего элемента с классом selected установлено align-self: center . Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н
Изменение основной оси
До сего момента мы изучали поведение при flex-direction установленном в row , в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.
Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.
Можно попробовать пример ниже, где установлено flex-direction: column .
Выравнивание содержимого по перекрёстной оси — свойство align-content
До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.
Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.
Свойство align-content принимает следующие значения:
- align-content: flex-start
- align-content: flex-end
- align-content: center
- align-content: space-between
- align-content: space-around
- align-content: stretch
- align-content: space-evenly (не описано в спецификации Flexbox)
В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between , означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.
Попробуйте другие значения align-content для понимания принципа их работы.
Также можно сменить значение flex-direction на column и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.
Примечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.
В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.
Выравнивание содержимого по главной оси
Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content . Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content , мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.
В нашем первом примере с использованием свойства display: flex , применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start . Все свободное место располагается в конце контейнера.
Свойство justify-content может принимать те же самые значения, что и align-content .
- justify-content: flex-start
- justify-content: flex-end
- justify-content: center
- justify-content: space-between
- justify-content: space-around
- justify-content: stretch
- justify-content: space-evenly (не определено в спецификации Flexbox)
В примере ниже, свойству justify-content задано значение space-between . Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.
Если свойство flex-direction имеет значение column , то свойство justify-content распределит доступное пространство в контейнере между элементами.
Выравнивание и режим записи
Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.
Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.
В примере ниже свойству property задано значение rtl , которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content , чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.
Выравнивание и гибкое-направление
Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row .
В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end . В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row . Вы увидите, что теперь элементы отображаются реверсивно.
Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction , элементы контейнера выстраиваются в режиме записи вашего языка ( ltr или rtl ).
Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column . Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.
Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.
Использование авто отступов для выравнивания по главной оси
Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto .
Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.
На первый взгляд может показаться, что этот пример использования свойства justify-self . Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.
Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right . Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.
В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto . Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.
Будущие функции выравнивания для Flexbox
В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content .
Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap , как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.
Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.
- Выравнивание Коробки
- Выравнивание Коробки в Flexbox (Гибкая Коробка)
- Выравнивание Коробки в Grid Layout (Макет Сетки)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Расположить элементы в столбец
Нужно расположить 2 diva (один из которых пустой) в 1 колонку, используя flex, и указывая ширину\высоту в %. Т.е чтоб это было адаптивным. Можно ли это сделать на flex? Или только на grid? В итоге должно получиться
.container < display:flex; >.a < width:100%; background-color:red; >.b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sodales neque, quis blandit risus. Etiam ultrices convallis ipsum a viverra. In est felis, dapibus sit amet est in, aliquet ullamcorper urna. Отслеживать
задан 24 авг 2019 в 19:05
1 1 1 серебряный знак 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Чтобы расположить два блока друг под другом через Flexbox, достаточно для родителя указать flex-direction: column .
Но вот задать высоту дочерних элементов в процентах не получится.
В CSS существуют проблемы с определением высоты элемента относительно родителя в процентах, так как Вы загоняете алгоритм отрисовки в цикличность и тупик.
Ведь высота родительского блока заранее неизвестна и определяется суммарной высотой содержимого. Но одновременно с этим, Вы хотите, чтобы высота содержимого определялась как половина от высоты родителя (которая заранее неизвестна). Нет точки отсчёта
Разбираемся с обёртыванием Flex элементов
Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства flex-direction (flex-направление) в значение row (строки) или создавая новые столбцы, устанавливая свойство flex-direction в значение column (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию CSS Grid Layout вместо флекс-боксов.
Делаем вещи завёрнутыми
Значение по умолчанию свойства flex-wrap равняется nowrap . Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство flex-wrap и установить ему значение wrap , или использовать сокращённую запись свойства flex-flow со значениями row wrap или column wrap соответственно для строк и столбцов.
Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с flex-basis равным 160px и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.
То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.
Перенос и направление (flex-direction)
Перенос работает, что логично ожидать, и в паре со свойством flex-direction . Если flex-direction установлен в row-reverse , тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.
Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям — строки не будут заполняться вверх!
Объяснение одномерного макета
Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.
В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.
Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки — Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.
В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение — либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите — используйте Grid.
Как работают грид-системы на основе flexbox?
Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex — либо задав значение параметру flex-basis , либо добавив ширину к самому элементу, при этом оставив значение flex-basis как auto — вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.
Здесь я установил flex-grow и flex-shrink на 0 , чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.
Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.
Создание промежутков между элементами
При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации Box Alignment module. В будущем мы сможем просто использовать row-gap и column-gap для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать — это использовать margin для достижения этой цели.
Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.
Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.
Сворачивание элементов
В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра visibility . Спецификация описывает поведение так:
«Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую «распорку», которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту «виляния» всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.» — Сворачивание элементов
Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.
В следующем живом примере у нас показан флекс-контейнер со параметров «перенос» в состоянии «не переносить». Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse . Следовательно он имеет некую «распорку», которая удерживает ту высоту, которая позволит показать этот элемент. Если вы удалите visibility: collapse из CSS или измените значение на visible , то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.
Примечание: Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.
Когда вы работаете с многострочным флекс-контейнером, вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.
Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.
Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свёрнутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.
Если это вызывает проблемы для вашего макета, возможно вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.
Разница между visibility: hidden и display: none
Когда вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
#2 Flexbox CSS
Flexbox CSS — направление осей и многострочность
В текущем видео разбираем два свойства, первое flex-direction влияющее на управление Осей, второе flex-wrap на многострочность, и многоколоночность элементов. В конце закрепляем все на практическом примере.
Посмотреть видео — 2# Видео-урок по flexbox CSS
Свойство flex-direction (направление Осей)
Начинаем со свойства flex-direction , оно позволяет изменить порядок направление flex-элементов выводить их как в строчном расположении, так и в колоночном виде. Свойство задается для контейнера и принимает четыре значения.
flex-direction: row — значение установленное по умолчанию, расположение элементов начинается с лева на право.
flex-direction: row;
flex-direction: row-reverse – меняет порядок элементов, по мимо того что они прижимаются к правому краю блока, их порядок начинается с права на лево.
flex-direction: row-reverse;
На самом деле свойство flex-direction , меняет не порядок элементов, как это может показаться на первый взгляд, а меняет направление оси, на которой расположены элементы в контейнере, и тут мы знакомимся с одним из основных понятием flexbox , это Оси .
Всего их две, есть основная ось , которую называют «Главная», и вторая ось «Поперечная», которая идет поперек главной оси.
У каждой из осей есть две составляющие, это начало ее, и конец.
По умолчанию, главная ось начинается в начала контейнера, и заканчивается в его конце, а все элементы это как куски мяса насаженные на шампур и идущие друг за другом до самого начала контейнера.
При помощи значение row-reverse , мы переворачиваем главную ось, тем самым меняем направлении ее в нутрии контейнера, все, что было насажено на шампур, соответственно переворачивается вместе с ним. Но обратите внимание, как был элемент «1» в начале оси, так он в начале оси и остался, только теперь ось начинает не с начала, а с его конца.
Свойства из предыдущего урока justify-content , при помощи которого выравнивали элементы по горизонтали, в данном случае будет работать противоположно. Установим значение center , элементы выравниваются, как и положено посередине контейнера, а вот значение flex-start элементы прижимает к правой стороне, в тоже время flex-end позиционирует элементы в начале контейнера. Обязательно этот момент запомните при использовании flexbox .
flex-direction: column , применяется к поперечной оси и работает так же как row , только в отличие от него, все элементы в контейнере выстраивает в колонку сверху в низ.
flex-direction: column;
flex-direction:column-reverse , по аналогии работает как row-reverse , только теперь переворачивает поперечную ось, и порядок элементов в данном случае идет снизу вверх.
flex-direction: column-reverse;
Свойство flex-wrap – (многострочность элементов)
Следующее свойство, с которым познакомимся, это flex-wrap , когда элементы не влезают в отведенную область контейнера у нас есть возможность при помощи данного свойства сделать многострочность илт многоколлоночность элементов.
Свойство применяется к контейнеру и принимает всего три значения.
flex-wrap: nowrap , значение по умолчанию, flex-элементы не переносятся, располагаются в одну линию или колонку, то есть то что видим сейчас.
flex-wrap: nowrap;
flex-wrap: wrap , создает как многострочность так и многоколоночность элементов, и это зависит от того установлено ли значение column или column-reverse в свойстве flex-direction . Если мы закомментируем данное свойство, то соответственно по умолчанию оно принимает значение row , а значит, все элементы выстроятся в рад с лева на право, и занимают свое стандартное положение. Теперь сжимая область контейнера по ширине, элементы, которые в него не влезают, будут переноситься на следующий ряд.
flex-wrap: wrap;
В тоже время, когда установлено значение column или column-reverse , формируются колонки. В нашем случае одна колонка, потому что высота контейнера вычисляется из совокупности всех находящихся в нем элементов, и нам достаточно ее ограничить, что бы увидели формирование нескольких колонок.
height: 150px; flex-direction: column-reverse;
flex-wrap: wrap-reverse , располагает все элементы в обратном порядке слева на права, при этом перенос происходит снизу вверх.
flex-wrap: wrap-reverse;
И если у нас есть представление, как использовать свойство flex-wrap , к примеру, для фотогалереи, списков товаров, при помощи которого можем делать респонсивный веб-дизайн, то свойство flex-direction при помощи которого меняем направление осей, не каждому понятно, где его можно применять. Вот именно этот вариант мы рассмотрим в практическом примере.
Перейти к примеру — Смотреть пример