css властивість flex-direction
CSS властивість flex-direction встановлює напрямок головної осі батьківського контейнера. На напрямок також впливає значення атрибута dir у контейнера.
Зверніть увагу, що кінцеве значення властивості залежить від початкового напрямку осі контейнеру. Якщо атрибут dir дорівнює ltr, flex-direction зі значенням row розміщує елементи в порядку з ліва на право і row-reverse з права на ліво; якщо атрибут dir дорівнює rtl, flex-direction зі значенням row розміщує елементи в порядку з права на ліво і row-reverse з ліва на право.
| Нотатка: | Властивість |
| Нотатка: | Значення для розташування елементів у зворотньому напрямку впливають лише на їх візуальне відображення. Їхній порядок у сирцевому коді залишається незмінним. |
Синтаксис
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;Властивість flex-direction може отримувати 6 значень:
rowГоловна вісь спрямована так само, як і орієнтація тексту, за замовчуванням зліва направо. Якщо значення
dirзадано якrtl, то напрямок осі йде справа наліво.row-reverseСхоже на значення
row, але міняються місцями початкова і кінцева точки і головна вісь спрямована справа наліво. Якщо значенняdirзадано якrtl, то напрямок осі йде зліва направо.columnФлекс елементи відображаються у вигляді стовпчика. Стовпчик формується зверху вниз.
column-reverseГоловна вісь розташовується вертикально, але змінюється положення початкової і кінцевої точок і вісь спрямована знизу вгору.
initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
| Значення без задання: | row |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.flexDirection="column-reverse" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| flex-direction | 29.0 |
11.0 |
28.0 |
9.0 |
12.1 |
| Переглядач | |||
|---|---|---|---|
| flex-direction | 4.4 |
28.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Приклад роботи влативості
Значення властивості у дії
Простий приклад роботи властивості
Найпростіший приклад використання css властивості flex-direction
div {
display: flex;
flex-direction: row-reverse;
}