CSS Flexbox Layout CSS Esnek Kutu Kullanımı

WEB tasarımcıların en büyük problemlerden biri de çözünürlük değiştikçe sayfa içindeki elemanların yerleşimidir.
CSS de kullanılan flexbox yerleşimi(flexbox layout) bu probleme adeta sihirli çözümler üretmiştir.
Ayrıca istenirse bootstrap frameworkü kullanılarak da sayfa yerleşim problemi aşılabilir.

Flexbox kullanımında temel olarak yerleşim yapılması istenen elemanlar kapsayıcı(container) bir nesnenin içine alınır ve bu elemana display:flex ve istenilen yerleşim özellikleri verilir.
Örneğin elemanların alt alta sıralanması için önce display:flex ve sonra flex-direction:column özelliği yine kapsayıcı div'e verilmelidir.

Önemli Not: Kapsayıcı olan div elemanına display:flex özelliği verildiğinde içte bulunan nesnelerin genişlikleri ne olursa olsun çözünürlüğe göre yeniden hesaplanır. Bunun sebebi sayfa içinde yatay kaydırma çubuğu oluşmasını engellemektir. Böylece flexbox-layout'da yatay kaydırma problemi ortadan kaldırılmış olur.

<div style="display: flex; flex-direction: column; padding: 5px;"> <div style="height: 30px;"> Div1</div> <div style="height: 30px;"> Div2</div> <div style="height: 30px;"> Div3</div> </div> Örneğin yukarıda görülen özellikler kullanıldığında dışta kapyasayıcı bir div ve içindeki 3 eleman alt alta sıralanmış olarak görüntülenecektir.

Flex-Direction Özelliği

flex-direction özelliği nesneleri alt alta ya da yan yana ve hatta ters alt alta terse, yan yana ters olarak yerleştirmek için kullanılır.
flex-direction 4 farklı değer alabilir. Bunlar;
row: Elemanlar soldan sağa yanyana dizilir.
row-reverse: Elemanlar sağdan sola yanyana dizilir.(Ters)
column:Elemanlar yukarıdan aşağıya alt alta dizilir.
column-reverse :Elemanlar aşağıdan yukarıya alt alta dizilir.

Flex-Wrap Özelliği

Flex özelliğinin en önemli ve en sık kullanılan parçası flex-wrap 'dir.
Bu özellik ile taşıyıcı div içinde bulunan nesneler genişliğe göre yerleştirilir.
Flex-direction ile yanyana dizilebilen iç elemanlar genişliğe göre yer değiştirmezler sadece nesne genişlikleri otomatik olarak azalır. Ancak flex-wrap özelliği kullanılarak genişlik değiştikçe iç kısımda bulunan elemanlar için alt satıra kaydırma işlemi yapılabilir.

<div style="display: flex; flex-direction: row; flex-wrap:wrap; padding: 5px;"> <div style="width: 550px;"> Div1</div> <div style="width: 550px;"> Div2</div> <div style="width: 550px;"> Div3</div> </div>

Örneğin yukarıdaki kod bloğunda nesneler yan yana gelecek şekilde bir düzen oluşturulmuştur. Ancak sayfa genişliği yeterli gelmediğinde nesneler alt alta dizilecektir.

flex-wrap özelliği 3 farklı değer alabilir. Bunlar;
nowrap:Normal yerleşim aşağı kaydırma yok
wrap : Çözünürlüğe bağlı olarak aşağı kaydır veya yanyana yerleştir.
wrap-reverse: Nesleri alttan başlayarak yerleştir ve çözünürlüğe bağlı olarak kaydırma işlemi yap.

Flex-Flown Özelliği

Bu özellik flex-direction ve flex-wrap özelliklerinin kısa kullanımı içindir.
Örneğin bir nesneye bu iki özelliği aynı anda vermek için aşağıdaki kod kullanılır.

.flex-container{ display:flex; flex-flow: row wrap-reverse; }


Yorumlar


Flex konusunu uzun süredir merak ediyordum, benim için güzel bir başlangıç oldu

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