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.