css властивість flex-direction


CSS властивість flex-direction встановлює напрямок головної осі батьківського контейнера. На напрямок також впливає значення атрибута dir у контейнера.

Властивість `flex-direction`

Зверніть увагу, що кінцеве значення властивості залежить від початкового напрямку осі контейнеру. Якщо атрибут dir дорівнює ltr, flex-direction зі значенням row розміщує елементи в порядку з ліва на право і row-reverse з права на ліво; якщо атрибут dir дорівнює rtl, flex-direction зі значенням row розміщує елементи в порядку з права на ліво і row-reverse з ліва на право.

Нотатка:

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

Нотатка:

Значення для розташування елементів у зворотньому напрямку впливають лише на їх візуальне відображення. Їхній порядок у сирцевому коді залишається незмінним.

Синтаксис

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; 


}

Додаткові посилання