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

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

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

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Властивість flex-direction може отримувати 6 значень:

row

Головна вісь спрямована так само, як і орієнтація тексту, за замовчуванням зліва направо. Якщо значення dir задано як rtl, то напрямок осі йде справа наліво.

автор: Svitlana

правити

row-reverse

Схоже на значення row, але міняються місцями початкова і кінцева точки і головна вісь спрямована справа наліво. Якщо значення dir задано як rtl, то напрямок осі йде зліва направо.

автор: Svitlana

правити

column

Флекс елементи відображаються у вигляді стовпчика. Стовпчик формується зверху вниз.

автор: Svitlana

правити

column-reverse

Головна вісь розташовується вертикально, але змінюється положення початкової і кінцевої точок і вісь спрямована знизу вгору.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
flex-direction	29.0	28.0	9.0	12.1	11.0

Підтримка: мобільні переглядачі

Переглядач
flex-direction	4.4	28.0	9.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.row {
    display: flex;
    flex-direction: row-reverse;
}

.row div {
    padding: 8px 16px;
    border: 1px solid #0172ad;
}