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

CSS'de Div Nasıl Ortalanır (Flexbox)

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ç

İşte CSS'de en çok sorulan sorunun doğrudan cevabı: bir div'i ortalamak için, display: flex, justify-content: center ve align-items: center'ı ebeveyninin üzerine koyun. İşte bu - kabın üzerinde üç bildirim var ve çocuk, her boyutta kabın içinde hem yatay hem de dikey olarak mükemmel bir şekilde ortalanmış olarak oturuyor. Bu sayfa, oluşturucuyu tam olarak bu kombinasyonun zaten uygulanmış olduğu şekilde açar; dolayısıyla aşağıdaki önizleme, bunun şu anda üç numaralı kutu üzerinde çalıştığını gösterir.

Flexbox'tan önce, bir div'i ortalamak için bazı hack'ler gerekiyordu: marj: 0 auto yalnızca yatay olarak ortalanır ve yalnızca sabit genişlikte bir blokta çalışırdı; dikey merkezleme konum anlamına geliyordu: negatif kenar boşluklarıyla mutlak veya bir dönüşüm hilesi, içeriğin boyutu değiştiği anda her ikisi de kırılgandı. justify-content ana ekseni yönetir ve align-items çapraz ekseni yönetir - birlikte çocuğun ne kadar uzun veya geniş olduğuna bakılmaksızın her iki yönde de ortalanırlar, bu çiftin standart cevap haline gelmesinin nedeni tam olarak budur.

Aşağıdaki herhangi bir kontrolü sürükleyin ve kabın şekli değiştikçe veya aralarına boşluk eklendikçe üç önizleme kutusunun ortalanmış kalmasını izleyin. Doğru göründüğünde, alttaki CSS bloğunu doğrudan stil sayfanıza kopyalayın; her modern tarayıcıda aynı şekilde çalışır, kitaplığa gerek yoktur.

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