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

CSS Flexbox Gezinti Çubuğu — Logo Sol, Bağlantılar Sağ

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, flexbox oluşturucu ön ayarını klasik gezinme çubuğu düzenine açar: justify-content, space-between olarak ayarlandı ve align-items merkeze ayarlandı. İlk kutuya bir logo ve sonuncuya da bir dizi gezinme bağlantısı koyun (veya bağlantıları ortadaki kutulara bölün) ve flexbox konteyneri, logo veya bağlantı metni ne kadar uzun olursa olsun her öğeyi aynı dikey merkezde sıralı tutarken bunları çubuğun karşıt uçlarına iter.

aradaki boşluk bu işi yapan şeydir: ilk çocuğu başlangıç kenarına ve son çocuğu bitiş kenarına sabitler, ardından kalan çocukları aralarında eşit bir şekilde dağıtır - tam olarak sol logo, sağ bağlantılar şekli hemen hemen her site başlığının kullandığı şekildir. align-items: center daha sonra satır yüksekliği kesmelerine veya tablo hücresi görüntüleme hilelerine ihtiyaç duyan dikey hizalamayı çözer.

Çocuk sayısını gerçek gezinme çubuğunuza uyacak şekilde ayarlayın (çıplak bir logo ve CTA çubuğu için iki kutu, logo ve birkaç bağlantı için daha fazlası) ve düzenin canlı olarak uyarlanmasını izleyin. Başlığınızla eşleştiğinde CSS bloğunu kopyalayın veya bir özelliğin yakın akrabalarıyla karşılaştırılmasını görmek istiyorsanız aradaki boşluk ön ayarını açı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.