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

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com