English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Параметр flex-direction CSS определяет, как размещать элементы flex в контейнере flex, через установку направления главного оси эластичного контейнера.
В таблице ниже приведено описание использования и истории версий этого свойства, а также синтаксис использования свойства в скриптах JavaScript.
| Значение по умолчанию: | row |
|---|---|
| Подходит для: | Эластичный контейнер |
| Ингеритация: | Нет |
| Анимация: | Нет.См. также Свойства анимации. |
| Версия: | Новые функции CSS3 |
| Синтаксис JavaScript: | объект.style.flexDirection="row-reverse" |
Синтаксис этого свойства такой:
flex-direction: row | row-reverse | column | column-reverse | initial | inherit
Ниже приведен пример того, как использовать свойство flex-direction.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}Проверьте, посмотрите <‹/›>В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| row | Основная ось контейнера flex совпадает с направлением инлайн оси текущего режима ввода, то есть направлением текста. |
| row-reverse | Как и у row, но с обратным началом и концом оси. |
| column | Основная ось контейнера flex совпадает с направлением блочной оси текущего текста (вертикальное письмо - вертикальная ось, горизонтальное письмо - горизонтальная ось). |
| column-reverse | Как и у колонок, но с обратным началом и концом оси. |
| initial | Установите этот параметр в его значение по умолчанию. |
| inherit | Если задан, то связанный элемент принимает значение свойства flex-direction родительского элемента. |
Совместимость браузеров для свойства flex-direction, в таблице числа указывают на минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Узнайте больше в следующих руководствах:CSS3 многостраничная разметка.
Связанные свойства:align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.