Flexbox Oluşturucu
Gerçek Zamanlı Önizleme
Görsel Flexbox Oluşturucu Neden Kullanılır?
CSS Flexbox'ın etkileşen pek çok özelliği vardır ve kombinasyonları karmaşıklaşabilir. Görsel oluşturucumuzla açılır menülerle her özelliği ayarlayabilir ve düzeni gerçek zamanlı güncellendiğini görebilirsiniz.
Gerçek Zamanlı Önizleme
Özellik değişikliklerinde Flexbox düzeninin tam davranışını görün — tahmin gerekmez
Tüm Özellikler
flex-direction, justify-content, align-items, flex-wrap ve gap tek arayüzde
Hazır CSS
Stil sayfanıza yapıştırılabilecek temiz .container {} bloğunu kopyalayın
Flexbox Düzeni Nasıl Oluşturulur
Yön ve Kaydırmayı Ayarlayın
Ana eksen ve taşmayı kontrol etmek için flex-direction (satır/sütun) ve flex-wrap'i seçin
Öğe Hizalamayı Ayarlayın
Öğe dağıtımını ve hizalamasını kontrol etmek için justify-content ve align-items'ı ayarlayın
CSS'yi Kopyalayın
'CSS'yi Kopyala'ya tıklayarak projenize hazır tam .container CSS bloğunu alın
Flexbox Kullanım Alanları
Gezinti Çubuğu
Flexbox, logo+bağlantılar için justifyContent:space-between kullanan yatay gezinti çubuğu için idealdir
Kart Izgarası
Sabit flex temelli flex-wrap:wrap ile mobil uyumlu kart ızgarası oluşturun
Mükemmel Ortalama
justifyContent:center + alignItems:center — herhangi bir öğeyi ortalayan en basit yöntem
Form Düzeni
Flexbox ile etiketleri ve form alanlarını yatay veya dikey hizalayarak temiz form oluşturun
Flexbox En İyi Uygulamaları
✓ Ana ve Çapraz Ekseni Anlayın
justify-content ana ekseni kontrol eder (satır=yatay). align-items çapraz ekseni kontrol eder. flex-direction:column'e geçince rolleri değişir.
✓ Esnek Öğeler için flex:1 Kullanın
Flex öğesine flex:1 eklemek mevcut alanı dolduracak şekilde genişlemesini sağlar. Taşmayı önlemek için min-width:0 ile birleştirin.
✓ Kenar Boşluğu Yerine gap Kullanın
gap özelliği, dış kenarlara marj eklemeden flex öğeleri arasında eşit boşluk oluşturur.
✓ 2D Düzenler için Grid Kullanın
Flexbox tek seferde bir ekseni (satır veya sütun) kontrol eder. Hem satır hem sütun kontrolü için 2B ızgaralarda CSS Grid kullanın.
❓ Sık Sorulan Sorular
CSS Grid yerine Flexbox ne zaman kullanılır?
Flexbox, tek boyutlu düzenler (gezinti çubuğu, düğme grubu, form satırı) için idealdir. CSS Grid, satır ve sütunları aynı anda kontrol etmek için iki boyutlu düzenlerde üstündür.
flex-wrap:wrap nedir?
Varsayılan olarak flex öğeleri taşma olsa bile tek satıra zorlanır. flex-wrap:wrap öğelerin taşma anında bir sonraki satıra geçmesini sağlar — duyarlı düzenler için zorunludur.
align-items ile align-content arasındaki fark nedir?
align-items tek satırdaki flex öğelerini hizalar. align-content yalnızca birden fazla satır varsa (flex-wrap:wrap) uygulanır; kapsayıcı içindeki satırların dağıtımını kontrol eder.
Flexbox ile eşit genişlikte sütunlar nasıl oluşturulur?
Her flex öğesine flex:1 uygulayın. Bu, mevcut alanı eşit dolduracak şekilde genişlemesini sağlar. İçerikten bağımsız tam olarak 3 eşit sütun için flex:0 0 33,33% kullanın.