Сделайте так, чтобы гибкие элементы отображались в обратном порядке, и при необходимости оберните их:
div {
display: flex;
flex-flow: row-reverse wrap;
}
Попробуйте сами »
Определение flex-flow
CSS свойство flex-flow - это сокращенное свойство для:
Примечание: Если элементы не являются гибкими элементами, CSS свойство flex-flow не имеет никакого эффекта.
| Значение по умолчанию: | row nowrap |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.flexFlow="column nowrap" Попробуй |
Поддержка flex-flow
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0-webkit- |
11.0 | 28.0 18.0-moz- |
9.0 6.1-webkit- |
17.0 |
Синтаксис flex-flow
flex-flow: flex-direction flex-wrap|initial|inherit;
Значения flex-flow
| Значение | Описание | Демонстрация |
|---|---|---|
| flex-direction | Возможные значения: row row-reverse column column-reverse initial inherit Значение по умолчанию - "row". Указание направления гибких элементов |
Демо ❯ |
| flex-wrap | Возможные значения: nowrap wrap wrap-reverse initial inherit Значение по умолчанию - "nowrap". Указание того, следует ли обертывать гибкие элементы или нет |
Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме flex-flow
CSS Учебник: CSS Гибкий бокс
CSS Справочник: flex свойство
CSS Справочник: flex-direction свойство
CSS Справочник: flex-wrap свойство
CSS Справочник: flex-basis свойство
CSS Справочник: flex-grow свойство
CSS Справочник: flex-shrink свойство
HTML DOM справочник: flexFlow свойство