CSS Flexbox Layout - Alıgn-Contnent(Flex Cogul Sıra Hızalama)

CSS flex yerleşiminde container(taşıyıcı) div içindeki nesnelerin genişlikleri büyük olduğunda nesneler alt satıra inerek bir kaç satır oluşturmaktadır. Bu işlem için daha önceden bahsettiğimiz gibi taşıyıcı div'e flex-wrap:wrap özelliği verilmelidir. Böylece container içindeki nesnelerin genişlikleri sığmadığında bir veya birden fazla satır olacak şekilde yerleşim yapılabilir. Alt alta olan birden fazla satırın yerleştirilmesi için ise align-content özelliği kullanılır.

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

align-content özelliği 6 farklı değer alır. Bu özellikler şunlardır.
flex-start : Satırlar taşıyıcı div'in üst tarafına yaslanmış şekilde sıralanırlar.
flex-end : Satırlar taşıyıcı div'in alt tarafına yaslanmış şekilde sıralanırlar.
center : Satırlar dikeyde taşıyıcı div'e ortalanmış şekilde sıralanırlar.
stretch : Satırlar taşıyıcı div'in yüksekliğini tamamen kaplayacak şekilde yükseklikleri uzatılarak sıralanırlar.
space-between : Satırlar taşıyıcı div'in içini tamamen kaplayacak ve satırların arasındaki mesafe eşit olacak şekilde sıralanırlar.Örneğin 2 satır var ise biri en altta diğeri en üstte olacaktır.
space-around : Satırlar taşıyıcı div'in içini tamamen kaplayacaktır, taşıyıcı div ile satırlar arasında yaklaşık 1 birim mesafe ve satırların arasında yaklaşık 2 birimlik eşit mesafe olacak şekilde sıralanırlar.


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.

İletişim

  • info@frontendokulu.com