flex-direction
Оновлено: 29.03.2023
flex-direction
Властивість flex-direction задає напрямок основних осей у контейнері і тим самим визначає положення флексів у контейнері. На сам напрямок також впливає значення атрибута dir у контейнера.
Коротка інформація
| Значення за замовчуванням | row |
| Успадковується | Ні |
| Застосовується | До флекс-контейнера |
| Анімується | Ні |
Синтаксис
flex-direction: row | row-reverse | column | column-reverseЗначення
| row | Головна вісь спрямована так само як і орієнтація тексту, за замовчуванням зліва направо. Якщо значення dir задано як rtl, то напрямок осі йде справа наліво. |
| row-reverse | Схоже на значення row, але міняються місцями початкова і кінцева точки, а головна вісь спрямована справа наліво. Якщо значення dir задано як rtl, то напрямок осі йде зліва направо. |
| column | Головна вісь розташовується вертикально і спрямована зверху вниз. |
| column-reverse | Головна вісь розташовується вертикально, але змінюється положення початкової та кінцевої точок і вісь спрямована знизу вгору. |
Приклад
Об'єктна модель
Об'єкт.style.flexDirection
Примітка
Safari до версії 9 підтримує властивість -webkit-flex-direction.