css властивість flex-direction
CSS властивість flex-direction встановлює напрямок головної осі батьківського контейнера. На напрямок також впливає значення атрибута dir у контейнера.
Зверніть увагу, що кінцеве значення властивості залежить від початкового напрямку осі контейнеру. Якщо атрибут dir дорівнює ltr, flex-direction зі значенням row розміщує елементи в порядку з ліва на право і row-reverse з права на ліво; якщо атрибут dir дорівнює rtl, flex-direction зі значенням row розміщує елементи в порядку з права на ліво і row-reverse з ліва на право.
- Нотатка
-
Властивість
автор: Svitlanaflexпрацює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивістьdisplayвстановлена якflex(display: flex;абоdisplay: inline-flex). - Нотатка
-
Значення для розташування елементів у зворотньому напрямку впливають лише на їх візуальне відображення. Їхній порядок у сирцевому коді залишається незмінним.
автор: Svitlana
Синтаксис
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;Властивість flex-direction може отримувати 6 значень:
-
row -
Головна вісь спрямована так само, як і орієнтація тексту, за замовчуванням зліва направо. Якщо значення
автор: Svitlanadirзадано якrtl, то напрямок осі йде справа наліво. -
row-reverse -
Схоже на значення
автор: Svitlanarow, але міняються місцями початкова і кінцева точки і головна вісь спрямована справа наліво. Якщо значенняdirзадано якrtl, то напрямок осі йде зліва направо. -
column -
Флекс елементи відображаються у вигляді стовпчика. Стовпчик формується зверху вниз.
автор: Svitlana -
column-reverse -
Головна вісь розташовується вертикально, але змінюється положення початкової і кінцевої точок і вісь спрямована знизу вгору.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | row |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.flexDirection="column-reverse" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 22 | 9 | 12.1 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 22 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
У розмітці елементи йдуть 1, 2, 3 — а row-reverse шикує їх від правого краю у зворотному порядку.
HTML
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>CSS
.row {
display: flex;
flex-direction: row-reverse;
}
.row div {
padding: 8px 16px;
border: 1px solid #0172ad;
}Приклад роботи влативості
Динамічний приклад
Значення властивості у дії
Простий приклад роботи властивості
Коментарі
Коментарів ще немає — будьте першим!