Главна и попречна ос у флекс блоковима у CSS
О флекс боксевима се може говорити у две терминологије: прва је - ред или колона, а друга - у терминима оса. Са редовима и колонама смо већ познати, хајде сада да разумемо осе. Разумевање оса је потребно за поравнавање елемената по хоризонтали или по вертикали.
При раду са флекс елементима увек постоји
главна ос и попречна. Елементе можемо
поравнавати дуж главне осе и попречно од
главне осе. Главна ос може имати 4
праца: од лева ка десно, од десно ка лево,
одозго надоле и одоздо нагоре.
Правац попречне осе зависи од правца главне: ако је главна ос хоризонтална, онда је попречна ос усмерена одозго надоле, ако је главна ос вертикална, онда је попречна усмерена од лева ка десно. Других праваца попречна ос не може имати.
Правац главне осе се регулише својством
flex-direction. Ако ово својство
има вредност row - главна ос је усмерена
од лева ка десно, ако је вредност row-reverse,
онда од десно ка лево. Вредност column
усмерава осу одозго надоле, а вредност column-reverse
- одоздо нагоре.
Нека је главна ос хоризонтална. Где ће бити усмерена попречна ос?
Нека је главна ос вертикална. Где ће бити усмерена попречна ос?
Нека је попречна ос усмерена удесно. Где у том случају може бити усмерена главна ос?
Нека је попречна ос усмерена надоле. Где у том случају може бити усмерена главна ос?
Да ли попречна ос може бити усмерена од десно ка лево?
Да ли попречна ос може бити усмерена одоздо нагоре?
Нека својство flex-direction има
вредност row. Где ће бити усмерена
главна ос? Где ће бити усмерена
попречна ос?
Нека својство flex-direction има
вредност column. Где ће бити усмерена
главна ос? Где ће бити усмерена
попречна ос?
Нека својство flex-direction има
вредност row-reverse. Где ће бити усмерена
главна ос? Где ће бити усмерена
попречна ос?
Нека својство flex-direction има
вредност column-reverse. Где ће бити
усмерена главна ос? Где ће бити усмерена
попречна ос?