CSS'te Esnek Kutularda Ana Eksen ve Çapraz Eksen
Esnek kutular (flexbox) hakkında iki terimle konuşabiliriz: birincisi - satır veya sütun, ikincisi - eksenler terimleriyle. Satır ve sütunları zaten ele aldık, şimdi eksenleri anlamaya çalışalım. Eksenleri anlamak, elemanları yatay veya dikey olarak hizalamak için gereklidir.
Esnek elemanlarla çalışırken her zaman bir
ana eksen ve bir çapraz eksen vardır.
Elemanları ana eksen boyunca ve ana eksene
çapraz olarak hizalayabiliriz. Ana eksen 4
yöne sahip olabilir: soldan sağa, sağdan sola,
yukarıdan aşağıya ve aşağıdan yukarıya.
Çapraz eksenin yönü, ana eksenin yönüne bağlıdır: eğer ana eksen yatay ise, çapraz eksen yukarıdan aşağıya doğrudur, eğer ana eksen dikey ise, çapraz eksen soldan sağa doğrudur. Çapraz eksenin başka yönleri olamaz.
Ana eksenin yönü, flex-direction özelliği
ile kontrol edilir. Bu özelliğin değeri row
ise - ana eksen soldan sağa doğrudur, eğer değer
row-reverse ise, sağdan sola doğrudur.
column değeri ekseni yukarıdan aşağıya
yönlendirir, ve column-reverse değeri
ise - aşağıdan yukarıya.
Ana eksenin yatay olduğunu varsayalım. Çapraz eksen hangi yöne doğru olur?
Ana eksenin dikey olduğunu varsayalım. Çapraz eksen hangi yöne doğru olur?
Çapraz eksenin sağa doğru olduğunu varsayalım. Bu durumda ana eksen hangi yöne doğru olabilir?
Çapraz eksenin aşağı doğru olduğunu varsayalım. Bu durumda ana eksen hangi yöne doğru olabilir?
Çapraz eksen sağdan sola doğru olabilir mi?
Çapraz eksen aşağıdan yukarıya doğru olabilir mi?
flex-direction özelliğinin değerinin
row olduğunu varsayalım. Ana eksen
hangi yöne doğru olur? Çapraz eksen hangi
yöne doğru olur?
flex-direction özelliğinin değerinin
column olduğunu varsayalım. Ana eksen
hangi yöne doğru olur? Çapraz eksen hangi
yöne doğru olur?
flex-direction özelliğinin değerinin
row-reverse olduğunu varsayalım. Ana
eksen hangi yöne doğru olur? Çapraz eksen
hangi yöne doğru olur?
flex-direction özelliğinin değerinin
column-reverse olduğunu varsayalım.
Ana eksen hangi yöne doğru olur? Çapraz
eksen hangi yöne doğru olur?