Flexbox Nedir?
İngilizce: CSS Flexbox
Flexbox, CSS'te öğeleri tek eksende esnek biçimde hizalayan, boşluk dağıtan ve değişen içerik boyutlarına uyum sağlayan layout modelidir.
Flexbox Nedir?
Flexbox, CSS ile tek eksende düzen kurmak için kullanılan layout modelidir. Bir satırdaki butonları hizalamak, kart içeriğini dikeyde dağıtmak veya değişken genişlikte menü öğelerini esnek tutmak için uygundur.
Nasıl Çalışır?
Flexbox’ta bir flex container ve onun içindeki flex item’lar vardır. display: flex container’a verilir. flex-direction ana eksenin satır mı sütun mu olacağını belirler. justify-content ana eksende, align-items çapraz eksende hizalama yapar. gap öğeler arası boşluğu yönetir.
Öğelerin büyüyüp küçülmesi flex-grow, flex-shrink ve flex-basis değerleriyle kontrol edilir. Böylece bir arama kutusu kalan alanı doldururken yanındaki ikon buton sabit kalabilir.
Grid ile Farkı
Flexbox tek boyutlu yerleşimler için güçlüdür: satır veya sütun. Grid layout ise aynı anda satır ve sütun kontrolü gereken iki boyutlu sayfa düzenlerinde daha uygundur.
Günlük arayüz geliştirmede ikisi birlikte kullanılır. Sayfanın ana iskeleti grid ile, kart içindeki başlık, buton ve meta bilgisi flexbox ile düzenlenebilir.