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

Eşit Genişlikte Flexbox Sütunları — CSS 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ç

Bu sayfa, üç önizleme kutusunda zaten ayarlanmış olan flex-grow: 1 ile oluşturucuyu açar. Bunları izleyin: içeriklerine uyacak şekilde küçültmek yerine, her kutu, satırdaki kalan alandan eşit bir pay talep eder; bu, eşit genişlikte esnek sütunların tam tarifidir - yüzde genişlik yok, hesaplama yok, senkronize tutmak için sabit piksel matematiği yok.

flex-grow: 1 bir çocuğa büyümesini söyler ve bunu sıradaki her çocuğa ayarlamak, hepsinin aynı miktarda büyümesi anlamına gelir, böylece kaç tane olduğuna veya içlerinde ne tür içerik bulunduğuna bakılmaksızın aynı genişliğe sahip olurlar. Aşağıdaki kontrollerin bulunduğu bir kutu ekleyin veya kaldırın ve kalan sütunlar eşit kalacak şekilde anında yeniden dağıtılır; üretimde bir tarayıcı penceresini bu düzen üzerinde yeniden boyutlandırdığınızda aynı şekilde davranır.

Eşit yükseklikteki kart ızgaralarının, fiyatlandırma tablosu sütunlarının ve eşit şekilde bölünmüş altbilgi bölümlerinin ardındaki model budur. Esnek büyümesini diğerlerinin üzerine çıkararak bir sütuna daha fazla yer verin veya temiz, eşit bir bölünme için aşağıdaki CSS bloğunu tam olarak oluşturulduğu şekilde kopyalayın.

🛡️
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.