flex-directionИмовина је под-својство Флексибилна кутија Лаиоут модула.
Успоставља главну осу, дефинишући на тај начин смер флекс предмета који се постављају у флекс контејнер.
Подсетник: главна ос флексибилног контејнера је примарна ос дуж које се постављају флекс елементи. Пазите, није нужно хоризонтално; зависи од flex-directionимовине.
Објекат flex-directionприхвата 4 различите вредности:
row( подразумевано ): исто као и смер текстаrow-reverse: супротно смеру текстаcolumn: исто каоrowи одозго надолеcolumn-reverse: исто каоrow-reverseодозго надоле
Имајте на уму да rowи row-reverseсу погођене усмерења на флек контејнера. Ако је његов правац текста ltr, rowпредставља хоризонталну осу оријентисану с лева на десно и row-reverseс десна на лево; ако је правац rtlсупротан.
Синтакса
flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )Демо
У следећој демонстрацији:
- Црвена листа је постављена на
row - Жута листа је постављена на
row-reverse - Плава листа је постављена на
column - Зелена листа је постављена на
column-reverse
Напомена: Смер текста није измењен.
У основи, користићете rowу већини случајева или columnпод одређеним околностима. Иначе, прилично је необично да се обрнути редослед кретања обрне.
Подршка прегледача
- (модерно) значи недавну синтаксу из спецификације (нпр.
display: flex;) - (хибрид) значи чудну незваничну синтаксу из 2011. године (нпр.
display: flexbox;) - (стара) значи стара синтакса из 2009. године (нпр.
display: box;)
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 21+ (модерно) 20- (старо) | 3,1+ (старо) | 2-21 (стари) 22+ (нови) | 12,1+ (модерно) | 10+ (хибридно) | 2,1+ (старо) | 3,2+ (стара) |
Прегледач Блацкберри 10+ подржава нову синтаксу.
За више информација о томе како мешати синтаксе како бисте добили најбољу подршку за прегледач, погледајте овај чланак (ЦСС-трикови) или овај чланак (ДевОпера).