Flexbox Nedir? CSS Düzeninin Temel Mantığı

Flexbox, öğeleri tek bir ana eksende düzenleyen CSS yerleşim modelidir. display: flex; ve gap: 12px; ile doğrudan çocukları aynı satırda veya sütunda hizalayın. Flexbox nedir sorusunun net yanıtı şudur: Bir kapsayıcının yönünü, boşluklarını, hizasını ve alan paylaşımını yöneten CSS sistemidir.

Flexbox Nasıl Çalışır?

Flexbox kullanmak için kapsayıcıya display: flex; yazın. Bu öğe flex container adını alır. Kapsayıcının doğrudan içindeki öğeler ise flex item olarak davranır ve flex kurallarına göre yerleşir.

Varsayılan yön row değeridir. Bu değer, öğeleri yatay eksende yan yana dizer. Dikey bir akış kurmak için flex-direction: column; kullanın. İç içe bir div, dış kapsayıcının doğrudan çocuğu değilse dış kapsayıcının flex kurallarıyla düzenlenmez.

Örneğin üç öğeyi aynı kapsayıcıya yerleştirin: <div class="kutu">, ardından Bir, İki ve Üç içeriklerini ekleyin. .kutu { display: flex; } kuralı, bu üç doğrudan çocuğu aynı flex düzenine sokar.

Ana ve Çapraz Eksen Nasıl Belirlenir?

Flexbox iki eksenle çalışır. Ana eksen, öğelerin sıralandığı yöndür. Çapraz eksen, ana eksene dik yönde uzanır. flex-direction değeri değiştiğinde bu iki eksenin yönü de değişir.

justify-content ana ekseni, align-items ise çapraz ekseni yönetir. Bu nedenle row yönünde merkezleme için iki özellik farklı yönleri kontrol eder. Kuralın etkisini değerlendirirken önce flex-direction değerini kontrol edin.

Temel Flexbox Özellikleri Nelerdir?

Flexbox özelliklerini kapsayıcı ve öğe kuralları olarak ayırın. Kapsayıcı kuralları yönü, hizayı, aralığı ve satır davranışını belirler. Öğe kuralları ise belirli bir öğenin alan paylaşımını, temel boyutunu ve görsel sırasını yönetir.

• display: flex; kapsayıcıyı flex container yapar.
• flex-direction: ana yönü row veya column seçer.
• justify-content: öğeleri ana eksende dağıtır.
• align-items: öğeleri çapraz eksende hizalar.
• gap: öğeler arasındaki boşluğu belirler.
• flex-wrap: sığmayan öğeleri yeni satıra veya sütuna taşır.
• align-content: birden fazla flex satırını çapraz eksende dağıtır.

Öğe düzeyinde flex-grow boş alan paylaşımını, flex-shrink daralma davranışını belirler. flex-basis büyüme veya küçülme öncesindeki temel boyutu tanımlar. align-self tek öğenin çapraz eksen hizasını değiştirir; order ise görsel sıralamayı düzenler.

Satır ve Sütun Düzeni Nasıl Kurulur?

Önce aynı gruba ait öğeleri tek kapsayıcı altında toplayın. Ardından kapsayıcıyı flex yapın ve ana yönü seçin. Menü, araç çubuğu veya kart başlığı gibi yatay yapılarda row; form, dikey menü ve düğme gruplarında column kullanın.

1. Öğeleri aynı kapsayıcının doğrudan çocukları olarak yerleştirin.
2. Kapsayıcıya display: flex; ekleyin.
3. Yönü row veya column ile belirleyin.
4. Ana eksen hizasını justify-content ile ayarlayın.
5. Çapraz eksen hizasını align-items ile ayarlayın.
6. Öğeler arasındaki boşluk için gap: 12px; yazın.

Üç öğeyi yatayda iki uca dağıtmak için justify-content: space-between; kullanın. Öğeleri dikey eksende ortalamak için align-items: center; ekleyin. Dar alanda taşmayı yönetmek için kapsayıcıya flex-wrap: wrap; yazın.

Flexbox Hangi Arayüzlerde Kullanılır?

Flexbox, bileşen içindeki öğeleri tek yönde hizalamanız gereken yapılara uygundur. Başlıkla düğmeyi aynı satıra yerleştirebilir, kart içeriğini dikey akıtabilir veya form alanlarını sütun halinde sıralayabilirsiniz. Her örnekte önce kapsayıcı yönünü, ardından hizalama kurallarını belirleyin.

• Gezinme menüsü: Bağlantıları row yönünde sıralayın ve aralarına 16px boşluk verin.
• Kart başlığı: Başlıkla simgeyi iki uca yerleştirmek için space-between kullanın.
• Buton grubu: Geniş alanda row, dar alanda column seçin.
• İçerik ortalama: justify-content: center; ve align-items: center; kullanın.
• Alt bilgi: İçerikleri column yönünde ve 8px aralıkla sıralayın.

Bir kapsayıcıya min-height: 240px; vererek dikey yönde kullanılabilir alan oluşturun. Ardından yön ve hizalama kurallarını ekleyin. Bu düzen, boş durum mesajlarını ve giriş bölümlerini kapsayıcı içinde ortalamak için kullanılabilir.

Flexbox ile CSS Grid Arasındaki Fark Nedir?

Flexbox tek ana eksen boyunca çalışır. CSS Grid ise satırları ve sütunları aynı düzen içinde yönetir. Bu ayrım, hangi aracın seçileceğini belirler. Bileşen içi hizalama için Flexbox, sayfanın birden fazla satır ve sütununu konumlandırmak için çoğunlukla Grid kullanın.

Bir Grid alanının içindeki menüyü Flexbox ile düzenleyebilirsiniz. Sayfa iskeletinde Grid, bileşen içindeki hizalamada Flexbox kullanmak iki modeli aynı projede birleştirir. CSS'in temel yapısı için CSS nedir? rehberine bakın. HTML dosyası hazırlamak için HTML nasıl oluşturulur? rehberini kullanın.

Sık Yapılan Flexbox Hataları Nasıl Çözülür?

Flexbox sorunları çoğunlukla yanlış eksen varsayımından, belirsiz kapsayıcı ölçüsünden veya doğrudan çocuk ilişkisinin yanlış kurulmasından kaynaklanır. Geliştirici araçlarında kapsayıcıyı seçin. Tarayıcının flex işaretlerini kullanarak yönü, çocukları ve taşan alanı inceleyin.

space-between, kullanılabilir boşluğu öğelerin arasına dağıtır. Tek öğede iki uç arasında dağıtılacak ikinci bir öğe bulunmaz. Taşma sürerse kapsayıcı genişliğini, öğelerin minimum boyutunu ve flex-wrap değerini birlikte kontrol edin.

Flexbox İçin Hangi Seçim Yapılmalı?

Düzen tek eksende akıyorsa Flexbox ile başlayın. Öğeler aynı satırda duracaksa row, alt alta akacaksa column seçin. Ekran daraldığında öğelerin yeni satıra geçmesi gerekiyorsa flex-wrap kullanın. Aralıkları ayrı margin kuralları yerine kapsayıcıdaki gap ile yönetin.

• Menü veya araç çubuğu: row ve align-items: center; kullanın.
• Dikey form: column ve 8px veya 16px gap seçin.
• Dar ekran: flex-wrap: wrap; ile öğeleri yeni satıra taşıyın.
• Sayfa iskeleti: Satırları ve sütunları birlikte konumlandırıyorsanız CSS Grid seçin.

Uygulama sırasında önce yönü belirleyin. Sonra ana ekseni, çapraz ekseni ve boşluğu ayrı ayrı ayarlayın. Birden fazla kuralı aynı anda değiştirirseniz hangi özelliğin yerleşimi etkilediğini ayırt etmek zorlaşır. Kapsayıcı yüksekliği veya genişliği yeterli değilse merkezleme görünmeyebilir.