Flexbox Jeneratörü
Görsel kontrollerle bir flex kapsayıcısı ve öğelerini kurun, düzenin canlı tepki vermesini izleyin ve tek tıkla CSS kodunu kopyalayın.
Düzeniniz doğrudan tarayıcınızda oluşturulur. Burada yaptığınız hiçbir ayar BroBroGo sunucularına yüklenmez.
SSS
justify-content ile align-items arasındaki fark nedir?
Justify-content, öğeleri ana eksen (satır veya sütunun aktığı yön) boyunca boşluklandırırken, align-items onları diğer eksen boyunca konumlandırır. Yönü satırdan (row) sütuna (column) çevirdiğinizde iki eksen yer değiştirir, böylece justify-content yukarıdan aşağıya, align-items ise soldan sağa çalışmaya başlar.
Öğe bazlı kontroller nasıl çalışır?
Numarasına göre bir öğe seçin, ardından boş alanı doldurmak için ne kadar büyüyeceğini (grow), alan daraldığında ne kadar küçüleceğini (shrink), başlangıç boyutunu (basis) ve kendi çapraz eksen hizalamasını ayarlayın. Sıra (order), HTML koduna dokunmadan bir öğeyi ekranda daha önce veya daha sonra gösterecek şekilde taşır. CSS çıktısında yalnızca gerçekten değiştirdiğiniz öğeler kendi kurallarını alır.
wrap ve align-content ne zaman önem kazanır?
Kaydırma (wrap) kapalıyken, her öğe tek bir satıra zorlanır ve daha dar olmaya sıkıştırılabilir. Açtığınızda ise artık sığmayan öğeler bir sonraki satıra düşer — işte o zaman align-content devreye girer ve satırları bir grup olarak boşluklandırır. Gap, margin kullanmadan öğeler ve satırlar arasındaki boşluğu ayarlar.