CSS Flexbox Oluşturucu
CSS Flexbox Generator, bir kapsayıcıda flex-direction, justify-content, align-items, flex-wrap, align-content ve gap değerlerini ayarlamanıza, 20'ye kadar öğeyi canlı önizlemenize ve oluşturulan CSS'i kopyalamanıza olanak tanır.
Bu araç hakkında
CSS Flexbox Generator, bir kapsayıcıda flex-direction, justify-content, align-items, flex-wrap, align-content ve gap değerlerini ayarlamanıza, 20'ye kadar öğeyi canlı önizlemenize ve oluşturulan CSS'i kopyalamanıza olanak tanır.
Nasıl kullanılır
- Yönü ve satır kaydırmayı seçin.
- justify-content ve align-items'ı (kaydırılan satırlar için align-content'i de) ayarlayın.
- Gap'i ve önizleme öğesi sayısını belirleyin.
- Kapsayıcı kurallarını kullanmak için Copy CSS'e tıklayın.
Bilmekte fayda var
- justify-content öğeleri ana eksen boyunca, align-items ise çapraz eksende hizalar.
- flex-direction: column eksenlerin yerini değiştirir; bu durumda justify-content dikey çalışır.
- align-content yalnızca öğeler birden fazla satıra kaydığında etkili olur.
- gap özelliği güncel tüm büyük tarayıcılarda Flexbox ile çalışır.
- Flexbox tek boyutludur; satırları ve sütunları aynı anda yönetmek için CSS Grid kullanın.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
Flexbox ile bir div'i nasıl ortalarım?
Üst öğede display: flex; justify-content: center; align-items: center; ayarlayın — alt öğe yatay ve dikey olarak ortalanır.
justify-content ile align-items arasındaki fark nedir?
justify-content öğeleri ana eksen (varsayılan olarak satır) boyunca dağıtır; align-items ise onları çapraz eksen boyunca konumlandırır.
Ne zaman Grid yerine Flexbox kullanmalıyım?
Gezinme çubukları ve buton sıraları gibi tek boyutlu düzenler için Flexbox'ı, iki boyutlu sayfa düzenleri için Grid'i kullanın.
align-content neden hiçbir şey yapmıyor?
align-content yalnızca flex-wrap öğelerin birden fazla satıra kaymasına izin verdiğinde uygulanır.