Ana içeriğe geç
Software Dictionary
Kitap 02 · Web GeliştirmeSayfa 17 / 61

Flexbox

CSS Esnek Kutu Yerleşimi

Okunuşu
fleksboks
Güncellendi 2 dk okuma

Bu sayfayı paylaşın

Bağlantıyı gönderin, tanımı bağlantısıyla birlikte alıntılayın ya da kendi sitenizde bir kart olarak gösterin.

https://softwaredictionary.org/tr/terimler/flexbox

Kısaca

Flexbox, öğeleri tek bir satır ya da sütunda düzenleyen ve büyüme, küçülme, hizalama ile boş alanı paylaşma biçimlerini denetleyen bir CSS yerleşim modelidir.

CSS'te Flexbox nedir?

CSS Flexible Box Layout'un kısaltması olan Flexbox, öğeleri aynı anda tek bir yönde, satır ya da sütun boyunca yerleştirmenin bir yoludur. Bir öğeyi display: flex ile flex kapsayıcısına (container) dönüştürürsünüz; doğrudan çocukları da yan yana dizilen ve alanı doldurmak için uzayıp kısalabilen flex öğeleri olur.

Flexbox iki eksen üzerinde çalışır. Ana eksen, varsayılan olarak satır olan flex-direction'ı izler ve justify-content öğelerin bu eksen boyunca nasıl aralıklanacağını belirler; çapraz eksen ona diktir ve align-items o yöndeki hizalamayı denetler. gap özelliği öğeler arasına boşluk ekler, flex-wrap öğelerin yeni satırlara geçmesine izin verir, bir öğedeki flex: 1 gibi flex kısaltması ise kardeşlerine kıyasla ne kadar büyüyeceğini veya küçüleceğini belirler.

Ayarlanabilir kitap desteklerine sahip bir raftaki kitapları düşünün: hepsini sola yaslayabilir, ortalayabilir, eşit aralıkla dağıtabilir ya da bazı kitapların boşluğu doldurmak için genişlemesine izin verebilirsiniz. Flexbox; gezinme çubukları, araç çubukları, düğme grupları, kart satırları ve bir şeyi hem yatay hem dikey ortalamak gibi meşhur zor işler için gündelik bir araçtır ve tüm modern tarayıcılar onu destekler.

Flexbox çoğunlukla CSS Grid ile karşılaştırılır. Flexbox tek boyutludur ve öğeleri içeriklerinden dışa doğru boyutlandırır; bu, öğelerin bir çizgi boyunca aktığı bileşenlere uygundur. Grid ise iki boyutludur ve satır ile sütunları aynı anda denetler; bu da sayfa yerleşimleri ve galeriler için uygundur. Çoğu modern site ikisini de kullanır; genellikle genel sayfa yapısı için Grid, tek tek bileşenlerin içinde Flexbox.

Önemli noktalar

  • display: flex bir öğeyi flex kapsayıcısı, çocuklarını flex öğesi yapar.
  • Flexbox öğeleri tek boyutta, satır veya sütun olarak yerleştirir.
  • justify-content öğeleri ana eksende, align-items çapraz eksende hizalar.
  • gap, flex-wrap ve flex boşluğu, satır kaydırmayı ve büyümeyi denetler.
  • Bileşenler için Flexbox, iki boyutlu yerleşimler için CSS Grid kullanın.

Örnek

Flexbox ile bir gezinme çubuğu ve mükemmel ortalamacss
/* A navigation bar: logo on the left, links on the right */
.navbar {
  display: flex;
  justify-content: space-between; /* main axis (horizontal) */
  align-items: center;            /* cross axis (vertical) */
  gap: 1rem;
}

/* Center anything horizontally and vertically */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Sık sorulan sorular

Flexbox ile CSS Grid arasındaki fark nedir?

Flexbox öğeleri tek bir satır veya sütunda düzenler ve gezinme çubukları gibi bileşenler için idealdir. CSS Grid ise satır ve sütunları aynı anda denetler; bu da onu sayfa yerleşimleri ve galeriler için daha iyi kılar. İkisi çoğunlukla birlikte kullanılır.

Flexbox ile bir div nasıl ortalanır?

Üst öğeye display: flex, justify-content: center ve align-items: center verin. Üst öğe çocuktan daha yüksek olduğu sürece çocuk hem yatay hem dikey olarak ortalanır.

flex: 1 ne anlama gelir?

flex: 1, bir öğenin boş alanı doldurmak için büyümesine ve gerekirse küçülmesine izin veren, başlangıç boyutunu sıfıra ayarlayan bir kısaltmadır. Sonuç olarak flex: 1 olan tüm öğeler kullanılabilir alanı eşit paylaşır.

Sık karşılaştırılanlar

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin

Daha fazla

Ayarlar

EnglishTürkçe