CSS Flexbox

Esnek kutu düzeni (Flexible Box Layout), kullanıcı aray üzütasarımı için optimize edilmi şbir CSS kutu modelini tanımlar. Esnek kutu düzeninin ana ilkesi, tüm içeriğinin ana eksen ve çapraz eksen olmak üzere iki eksen boyunca düzenlenmesidir. Varsayılan olarak, ana eksen x ekseni yani yatay ekseni ifade eder. Benzer şekilde, çapraz eksen y eksenini (dikey) ekseni ifade eder.

Esnek kutu düzeninde, bir dışkapsayıcı ana öge olarak davranır ve bir kutu içinde yuvalanmı ştüm ögeleri de alt ögeler olarak görür. Bu ana ögeye esnek kutu ve tüm alt ögelerine esnek öğeler denir.

Esnek ögelerin hizalandı ğı esnek kapsayıcının birinci eksenine ana eksen(main -axis) denir. Esnek ögeler başlangı ç(main -start) ile başlayıp sona(main -end) kadar kutunun içine yerle ştirilir ve çapraz eksen (cross axis), ana eksene dik eksen olarak adlandırılır. Esnek kutu özelliğini kullanmak için ana kapsayıcıya “display: flex; ” veya “display: inline -flex; ” yazılması gereklidir.

Align -content, çok satırlı yapılarda ögeleri çapraz eksende (dikey) hizalamak için kullanılır.

Align -items, justify -content ‘in yatay eksende yaptığı işlemleri dikey eksende hizalama yapmak için kullanılır.

Align -self, bir esnek kutuya varsayılan veya tanımlanan hizalama tanımının dışına çıkmak için kullanılır.

Flex, esnek uzunlukta bileşenleri belirtir. flex -grow, flex -shrinkve flexbasis özelliklerini aynı anda ayarlamak için bir kısayol özelliğidir.

Flex-direction, esnek ögelerin yerleştirildiği yönü belirler. Özellik, varsayılan olarak yerleşimi yatayda gerçekleştirir.

Flex-wrap, esnek kutular varsayılan olarak tek bir satıra sığar flex -wrap özelliği ile ögeleri birden fazla satıra yaymak için kullanılır.

Flex-flow, flex -direction ve flex -wrap özelliklerini tek seferde tanımlamak için kullanılan kısayoldur.

Justify -content, esnek özelliğine sahip olan bir kapsayıcının yatay eksende nasıl hizalanacağını ayarlar.

Order, esnek ögelerin sıralama işlemleri için kullanılır. Eğer order özelliği ilgili kural yazılmadı ise varsayılan olarak 0(sıfır) değerini alır.