CSS’de Flexbox Kullanımı

Web tasarımının ilk dönemlerinde öğeleri yan yana getirmek ya da dikeyde ortalamak için tablo yapıları, kaydırma (float) kuralları ve satır içi blok (inline-block) tanımları kullanılıyordu. Bu yöntemler karmaşık sayfa düzenlerinde beklenmedik bozulmalara ve temizlenmesi zor CSS hilelerine yol açıyordu. Modern web geliştirme standartlarının bir parçası olan css flexbox, yani Flexible Box Layout modülü, tek boyutlu düzenleme işlemlerini pratik ve öngörülebilir hale getirdi. Bu rehberde css flexbox yapısının çalışma mantığını, kapsayıcı ve alt öğe özelliklerini adım adım inceleyeceğiz.

Flexbox Mantığı: Eksenler ve Hiyerarşi

Flexbox sistemini anlamanın temel şartı, sistemin iki eksen üzerinde çalıştığını kavramaktır. Bu eksenler şunlardır:

• Ana Eksen (Main Axis): Öğelerin varsayılan dizilim doğrultusudur. flex-direction özelliğine bağlı olarak yatay (soldan sağa) veya dikey (yukarıdan aşağıya) olabilir.
• Çapraz Eksen (Cross Axis): Ana eksene tam 90 derece dik olan eksendir. Ana eksen yataysa çapraz eksen dikey, ana eksen dikeyse çapraz eksen yatay çalışır.

Flexbox sisteminde iki temel aktör vardır: Dıştaki ana kapsayıcı (flex container) ve bu kapsayıcının doğrudan içinde yer alan alt öğeler (flex items). CSS özellikleri de kapsayıcıya uygulananlar ve doğrudan öğelere uygulananlar olarak ikiye ayrılır.

Flex Kapsayıcı (Container) Özellikleri

Bir alanı Flexbox düzenine geçirmek için ilgili HTML etiketine display değeri atanmalıdır. Bu işlem yapıldığı anda içindeki tüm doğrudan çocuklar birer flex öğesi haline gelir.

.kapsayici {
  display: flex;
}

Bu temel tanımlamanın ardından kapsayıcının davranışını belirleyen özellikler devreye girer.

1. flex-direction

Öğelerin hangi yönde dizileceğini belirler. Ana eksenin yönünü tayin eder:

• row: Varsayılan değerdir. Öğeleri soldan sağa yatay dizer.
• row-reverse: Öğeleri sağdan sola yatay dizer.
• column: Öğeleri yukarıdan aşağıya dikey dizer.
• column-reverse: Öğeleri aşağıdan yukarıya dikey dizer.

2. justify-content

Öğelerin ana eksen (main axis) üzerindeki dağılımını yönetir. Boşlukların nasıl paylaştırılacağını belirler:

• flex-start: Öğeleri eksenin başlangıcına yaslar.
• flex-end: Öğeleri eksenin bitişine yaslar.
• center: Öğeleri eksenin ortasında toplar.
• space-between: İlk öğeyi başa, son öğeyi sona yaslar ve aradaki boşluğu eşit dağıtır.
• space-around: Öğelerin her iki yanına eşit boşluk bırakır.
• space-evenly: Tüm öğelerin arasındaki ve kenarlardaki boşlukları tamamen eşit dağıtır.

3. align-items

Öğelerin çapraz eksen (cross axis) üzerindeki hizalamasını kontrol eder. Dikeyde ortalama problemi genellikle bu özellikle çözülür:

• stretch: Varsayılan değerdir. Öğeler kapsayıcının yüksekliğini dolduracak şekilde uzar.
• flex-start: Çapraz eksenin başlangıcına hizalanır.
• flex-end: Çapraz eksenin bitişine hizalanır.
• center: Çapraz eksende tam ortaya hizalanır.
• baseline: Öğelerin içerisindeki metin taban çizgilerine göre hizalama yapar.

4. flex-wrap ve gap

Varsayılan olarak flex öğeleri tek bir satıra sığmaya çalışır. Eğer öğelerin genişliği kapsayıcıyı aşıyorsa taşma veya küçülme gerçekleşir. Bunu önlemek için flex-wrap: wrap; tanımlanır. Bu kural, sığmayan öğeleri bir alt satıra aktarır.

Öğeler arasına kenar boşluğu vermek için geçmişte margin kullanılırdı. Güncel CSS standartlarında kapsayıcıya gap özelliği verilerek öğelerin arası net bir şekilde açılabilir:

.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

Yukarıdaki kod bloğu; menü öğelerini yatayda sıralar, aralarını eşit açar, dikeyde ortalar, ekrana sığmadığında alt satıra geçirir ve her öğe arasına yirmişer piksel boşluk ekler.

Flex Öğesi (Item) Özellikleri

Kapsayıcı genel yerleşimi yönetirken, tekil öğelerin boyutlanma ve davranışı doğrudan öğelere yazılan kurallarla belirlenir.

1. flex-grow, flex-shrink ve flex-basis

Bu üç özellik, öğelerin esneklik mekanizmasını doğrudan kontrol eder:

• flex-grow: Kapsayıcıda boş alan kaldığında, öğenin bu alandan ne oranda pay alarak büyüyeceğini belirtir. Sayısal değer alır. Değeri 0 olan öğe büyümez.
• flex-shrink: Kapsayıcı daraldığında öğenin diğerlerine göre ne kadar küçüleceğini belirler. Varsayılanı 1’dir.
• flex-basis: Öğenin esneme işlemlerinden önceki varsayılan başlangıç boyutunu tanımlar. Piksel veya yüzde cinsinden verilebilir.

Bu üç özellik genellikle flex kısayoluyla birlikte yazılır:

.ana-icerik {
  flex: 3 1 0%;
}

.kenar-cubugu {
  flex: 1 1 0%;
}

Bu örnekte boş alan dağıtılırken ana içerik 3 birim, kenar çubuğu ise 1 birim pay alacaktır. Böylece 1/4 ve 3/4 oranında esnek iki sütun oluşturulur.

2. align-self

Tek bir öğenin, kapsayıcının belirlediği align-items kuralını ezmesini (override etmesini) sağlar. Örneğin tüm öğeler ortalanmışken sadece tek bir öğeyi tabana yaslamak için kullanılır:

.ozel-buton {
  align-self: flex-end;
}

Pratik Bir Örnek: Bilgi Kartı Düzeni

HTML yapısında yan yana üç karttan oluşan ve mobilde alt alta geçebilen bir düzen kuralım.

HTML yapısı:

<div class="kart-grubu">
  <div class="kart">Kart 1</div>
  <div class="kart">Kart 2</div>
  <div class="kart">Kart 3</div>
</div>

CSS yapısı:

.kart-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.kart {
  flex: 1 1 250px;
  padding: 24px;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

Bu örnekte yer alan flex: 1 1 250px; kuralı her kartın başlangıçta en az 250 piksel olmasını sağlar. Ekran genişledikçe kartlar boşluğu dolduracak şekilde eşit oranda büyür (flex-grow: 1). Ekran genişliği kartların yan yana durmasına izin vermediğinde flex-wrap: wrap; sayesinde sığmayan kartlar otomatik olarak bir alt satıra geçer.

Özet ve Sonraki Adımlar

CSS Flexbox, bileşen bazlı arayüzlerin, gezinti menülerinin, buton gruplarının ve form alanlarının hızlı ve esnek şekilde kurgulanmasını sağlar. Tek boyutlu (yalnızca satır ya da yalnızca sütun odaklı) düzenlerde en ideal çözümdür.

Flexbox mantığını pekiştirdikten sonraki adım, iki boyutlu (aynı anda hem satır hem sütun kontrolü gerektiren) karmaşık sayfa iskeletleri için geliştirilen CSS Grid yapısını öğrenmektir. Modern ön yüz geliştirmede bu iki sistem birbirinin rakibi değil, birbirini tamamlayan araçlardır.