⭐ 0
🔍
Metin Görsel PDF ve Belgeler Ses Müzik Elektronik Zaman Faydalı Araçlar Doğrulayıcılar Ezoterizm Oyunlar

CSS Flexbox Oluşturucu

Görsel olarak bir CSS esnek kutu düzeni oluşturun: esnek yön, içeriği yaslama, hizalama öğeleri, esnek sarma ve kapsayıcıdaki boşluk, ayrıca çocuk başına esnek büyüme, esnek küçültme ve esnek temel, tümü canlı önizleme ve kopyalanabilir CSS ile.

İşleniyor... 0%

Sonuç

Bir flexbox düzeninde iki ayrı kural kitabı bulunur - kapsayıcıdaki özellikler (esnek yön, yaslama içeriği, hizalama öğeleri, esnek sarma, boşluk) ve her alt öğenin özellikleri (esnek büyüme, esnek küçültme, esnek temel) - ve bunları karıştırmak, "bu neden beklediğim şekilde merkezlenmiyor / büyütülmüyor / sarılmıyor" hatalarının en yaygın kaynağıdır. Bu oluşturucu, her iki kural kitabını da aynı anda ekrana koyar: herhangi bir kapsayıcı kontrolünü veya herhangi bir çocuğun kendi alanını değiştirin ve üç numaralı, renk kodlu kutu anında güncellenir, böylece neden ve sonuç görünür kalır.

Kapsayıcı tarafı her düzen eksenini kapsar: bir yön seçin, iki yana yaslı içerikle çocukların ana eksen boyunca nasıl dağıtılacağını seçin, onları çapraz eksende hizalayın, yeni satırlara sarılıp sarılmayacaklarına karar verin ve aralarında kenar boşluğu kesmek yerine bir boşluk ayarlayın. Çocuk tarafı da aynı derecede gerçek: sekize kadar kutu ekleyin, ikiye kadar çıkarın ve bunlardan herhangi birine kendi flex-grow, flex-shrink ve flex-tabanı verin - oluşturucu yalnızca çocuk başına bir CSS kuralı yazdırır; bunlardan en az biri tarayıcı varsayılanından farklı olduğunda, kopyalanan kod, ihtiyaç duymayan kutularda asla flex-grow: 0 ile kendisini doldurmaz.

Önceden ayarlanmış sayfalar doğrudan insanların isme göre aradığı düzenlere atlar: bir div'in nasıl ortalanacağı (her ikisi de ortaya ayarlanmış iki yana yaslı içerik ve hizalama öğeleriyle çözülen en çok sorulan tek CSS düzeni sorusu), logo-sol bağlantılar-sağ gezinme çubuğu, flex-grow yoluyla eşit genişlikte esnek sütunlar ve aradaki boşluğun yakın akrabalarıyla boşluk-etrafında ve eşit boşlukta yan yana karşılaştırılması.

Bu sitedeki her araç gibi, oluşturucu da ücretsizdir ve tamamen tarayıcınızda çalışır: yükleme yok, hesap yok ve sayfa yüklendikten sonra çevrimdışı çalışmaya devam ediyor.

🛡️
Tarayıcıda Çalıştırıldı

Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.

Kabul Edilen Formatlar ve Kurallar

  • Kapsayıcı kontrolleri: önizlemeye canlı olarak uygulanan esnek yön, içeriği yaslama, öğeleri hizalama, esnek sarma ve piksel cinsinden boşluk girişi.
  • Her biri kendi flex-grow, flex-shrink ve flex-temel alanlarına sahip, varsayılan olarak üç renk kodlu alt kutu (en fazla sekiz ekleyin, en fazla ikiye kadar çıkarın).
  • .flex-container kuralına ek olarak varsayılan olmayan flex özelliklere sahip alt öğe başına bir .flex-item-N kuralına sahip kopyalanabilir CSS bloğu.

Temel Faydalar

✓ Her kapsayıcı kontrolü ve her alt öğenin esneme-büyütme, esneme-küçülme ve esneme-tabanı güncellemesi üç numaralı önizleme kutusu canlı olarak çalışır, böylece bir stil sayfasına dokunmadan önce flexbox kurallarınızın tam olarak ne yaptığını görürsünüz.
✓ Oluşturucu yalnızca CSS varsayılanlarından farklı olan alt kuralları yazdırır, böylece kopyalanan kod her kutuda flex-grow: 0 değerini yeniden ayarlamak yerine kısa ve okunabilir kalır.
✓ Önceden ayarlanmış sayfalar, insanların ada göre aradıkları düzenleri çözer: bir div'i ortalamak, logo-sol bağlantılar-sağ gezinme çubuğu ve eşit genişlikte esnek sütunlar; birini açtığınızda araç zaten yapılandırılmıştır.

Kullanım Durumları

  • • Yaslama içeriği ve hizalama öğelerinin canlı önizleme kutularında çalışmasını izleyerek bir div'i hem yatay hem de dikey olarak ortalamak için tam CSS'yi edinin.
  • • Space-between ve align-items: center ile logo-sol, bağlantılar-sağ gezinme çubuğu düzeni oluşturun, ardından kapsayıcı CSS'yi doğrudan başlık bileşeninize kopyalayın.
  • • Hangisinin istediğiniz boşluğa uyduğunu tahmin etmek yerine, aradaki boşluk, etrafındaki boşluk ve eşit boşlukları aynı üç kutu üzerinde yan yana karşılaştırın.