İçeriğe geç
parazade
Yazılım & No-Code

Flexbox Ne Demek?

Yayın: · Son güncelleme:

Flexbox Ne Demek? Kısaca

Flexbox (Esnek Kutu Düzeni), CSS'te öğeleri bir satır ya da sütun boyunca hizalamayı, aralarındaki boşluğu dağıtmayı ve ekran boyutuna göre esnemelerini sağlamayı kolaylaştıran bir yerleşim modelidir.

Flexbox nedir?
İçindekiler
  1. Flexbox ne demek?
  2. Temel özellikler
  3. Örnek kullanım

Flexbox ne demek?

Flexbox, İngilizce "Flexible Box Layout" ifadesinin kısa adıdır ve esnek kutu düzeni anlamına gelir. Bir kapsayıcıya display: flex verdiğinizde, içindeki öğeler yan yana dizilir ve hizalanma, sıralanma ve boyutlanma kuralları kapsayıcıdan yönetilir.

Flexbox tek boyutlu çalışır. Yani öğeleri ya bir satır boyunca ya da bir sütun boyunca düzenler. Hem satır hem sütunun birlikte önemli olduğu sayfa iskeletleri için CSS Grid daha uygundur.

Temel özellikler

Birkaç özellik, Flexbox işlerinin büyük kısmını çözer. flex-direction öğelerin satır mı sütun mu dizileceğini belirler. justify-content ana eksendeki dağılımı, align-items ise dik eksendeki hizalamayı ayarlar.

gap öğeler arasına eşit boşluk koyar. flex-wrap: wrap ise sığmayan öğelerin alt satıra geçmesini sağlar. Öğelerin kendisine verilen flex: 1 gibi bir değer, kalan boşluğu paylaşmalarını sağlar.

Örnek kullanım

Bir sitenin üst menüsünü düşünün: solda logo, sağda dört bağlantı. Kapsayıcıya display: flex; justify-content: space-between; align-items: center; yazmak, logoyu sola, menüyü sağa iter ve ikisini dikeyde ortalar.

Yıllarca zor olan "bir kutuyu sayfanın tam ortasına koymak" işi de üç satıra iner. Kapsayıcıda hem justify-content hem align-items değerini center yapmanız yeterlidir. Düğme grupları, kart satırları ve form alanları gibi küçük bileşenlerde Flexbox genellikle ilk tercihtir.

Sıkça Sorulan Sorular

Flexbox mı CSS Grid mi kullanmalıyım?

Öğeleri tek bir satır veya sütun boyunca düzenliyorsanız Flexbox yeterlidir. Hem satırları hem sütunları birlikte kontrol etmeniz gereken sayfa düzenlerinde CSS Grid daha uygundur.

Flexbox tüm tarayıcılarda çalışır mı?

Güncel tarayıcıların tamamı Flexbox'ı destekler. Yalnızca çok eski tarayıcı sürümlerinde bazı özelliklerde farklılık görülebilir.

İlgili terimler

CSS GridCSS Grid, web sayfasında öğeleri satır ve sütunlardan oluşan iki boyutlu bir ızgaraya yerleştirmeyi sağlayan CSS yerleşim sistemidir. Sayfa iskeleti ve galeri gibi karmaşık düzenler için kullanılır.CSSCSS (Cascading Style Sheets, basamaklı stil şablonları), HTML ile oluşturulan web sayfalarının renk, yazı tipi, boşluk, yerleşim ve animasyon gibi görsel özelliklerini tanımlayan stil dilidir.Responsive Tasarım(Responsive Design)Responsive tasarım, bir web sitesinin düzeninin, görsellerinin ve yazılarının ekran genişliğine göre kendiliğinden uyum sağlamasıdır. Aynı sayfa telefon, tablet ve bilgisayarda okunaklı ve kullanışlı görünür.Media QueryMedia query, CSS'te belirli koşullar sağlandığında, örneğin ekran genişliği belli bir değerin altına indiğinde, yalnızca o duruma özel stil kurallarının uygulanmasını sağlayan bir yapıdır.Özellik(Feature)Özellik (feature), makine öğrenmesinde her bir örneği tanımlayan ve modelin tahmin yaparken girdi olarak kullandığı ölçülebilir nitelik ya da değişkendir. Örneğin ev fiyatı tahmininde metrekare, oda sayısı ve konum birer özelliktir.MySQLMySQL, verileri tablolarda saklayan ve SQL diliyle yönetilen açık kaynak kodlu bir ilişkisel veritabanı yönetim sistemidir. Web sitelerinde, özellikle WordPress gibi PHP tabanlı sistemlerde çok yaygın kullanılır.