CSS Flexbox Layout - Justıfy-Content (Flex Yatay Hızalama)

CSS Flex'in yerleşim ile ilgili de bir grup özelliği de mevcuttur. Flex-container içinde bulunan nesneleri yatayda hizalamak için justify-content özelliği kullanılmaktadır.
justify-content özelliği de display:flex özelliği gibi taşıyıcı div elemanına verilir.

Örneğin div nesnesi içinde bulunan diğer nesneleri ortalamak için taşıyıcı div'e
display:flex; ve
justify-content:center;
özellikleri verilmelidir.

Örneğin aşağıda görülen yapı oluşturulduğunda container içinde bulunan diğer nesneler ortalanmış olarak görüntüleneceklerdir. <div style="display: flex; justify-content:center;"> <div style="height: 30px; margin:5px;"> Div1 </div> <div style="height: 30px; margin:5px;"> Div2 </div> <div style="height: 30px; margin:5px;"> Div3 </div> </div>

justif-content özelliği 6 farklı değer alır. Bu özellikler şunlardır.
flex-start : Nesneler sola yaslanmış şekilde sıralanırlar.
flex-end : Nesneler sağa yaslanmış şekilde sıralanırlar.
center : Nesneler ortalanmış şekilde sıralanırlar.
space-between : Nesneler taşıyıcı div'in içini tamamen kaplayacak ve nesnelerin arasındaki mesafe eşit olacak şekilde sıralanırlar.Örneğin 2 nesne varsa biri en solda diğer en sağda olacak şekilde sıralanacaktır.
space-around : Nesneler taşıyıcı div'in içini tamamen kaplayacaktır, taşıyıcı div ile nesneler arasında yaklaşık 1 birim mesafe ve nesnelerin arasında yaklaşık 2 birimlik eşit mesafe olacak şekilde sıralanırlar.
space-evenly : Nesneler taşıyıcı div'in içini tamamen kaplayacaktır, ayrıca taşıyıcı div ile nesneler arasındaki mesafe eşit olarak sıralanır.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın