Flexbox Deneme Alanı

Tüm araçlar

Canlı öğeler üzerinde CSS Flexbox özelliklerini deneyin ve oluşturulan düzen CSS'ini kopyalayın.

Önizleme Düzenlemek için bir öğeye tıklayın
Oluşturulan CSS
—

Her şey tarayıcınızda çalışır — hiçbir şey yüklenmez.

Kapsayıcı
12px
Öğeler
0
Seçili öğe

Flexbox Deneme Alanı Hakkında

Flexbox Playground, CSS flexbox için uygulamalı bir deneme alanıdır. Konteyner özelliklerini — flex-direction, flex-wrap, justify-content, align-items, align-content ve gap — ayarlayın ve her değeri değiştirdikçe önizlemede 12'ye kadar canlı öğenin yeniden düzenlendiğini izleyin. Her özelliğin gerçekte ne yaptığını içselleştirmenin en hızlı yoludur.

Öğeler tek tek düzenlenebilir: birini seçmek için tıklayın ve flex-grow, flex-shrink, flex-basis, align-self ve order değerlerini ayarlayın. Bir öğenin boş alanı yutarak büyümesini izlerken kardeşlerinin genişliğini koruduğunu görmek, flex boyutlandırma modelini herhangi bir diyagramdan daha hızlı öğretir.

Playground, konteyner için ve varsayılan olmayan ayarlara sahip her öğe için temiz CSS üretir — doğrudan stil dosyanıza kopyalayın. Her şey tarayıcınızda çalışır, hiçbir şey yüklenmez ve bir sıfırlama düğmesi sizi temiz bir başlangıca döndürür.

Flexbox Deneme Alanı Nasıl Kullanılır

  1. Konteynerin flex-direction, wrap, justify-content, align-items, align-content ve gap değerlerini ayarlayın.
  2. Gerçek bileşeninizi yansıtmak için öğeler ekleyin veya kaldırın — 2 ile 12 arasında.
  3. Bir öğeye tıklayın ve grow, shrink, basis, align-self ve order değerlerini ayarlayın.
  4. Her değişiklikte canlı önizlemenin güncellendiğini izleyin.
  5. Oluşturulan CSS'i kopyalayıp projenize yapıştırın.

Sıkça sorulan sorular

flex-grow kalan alanı dağıtır: grow değeri 2 olan bir öğe, grow değeri 1 olan bir öğenin iki katı fazla alan alır. Alan yetersiz olduğunda flex-shrink tersine çalışır. İkisi de kardeşler arasında oran olup mutlak boyut değildir.

align-items, öğeleri kendi satırları içinde çapraz eksen boyunca konumlandırır. align-content ise konteyner içinde birden fazla sarılmış satırı aralar — yalnızca flex-wrap birden fazla satır oluşturduğunda görünür bir etkisi olur.

Her flex öğesi varsayılan olarak order 0'dır; öğeler en düşük order'dan en yükseğe doğru sıralanır. Bir öğenin order'ını değiştirmek, HTML'e dokunmadan onu görsel olarak taşır — DOM sırası, dolayısıyla ekran okuyucu sırası, aynı kalır.

Evet. Oluşturulan CSS, konteyner kurallarının yanı sıra grow, shrink, basis, align-self veya order değeri varsayılandan farklı olan her öğe için bir seçici içerir; böylece tam, çalışan bir düzeni yapıştırabilirsiniz.

Evet — ücretsiz, kayıt gerektirmez ve tamamen istemci tarafında çalışır. Denemeleriniz tarayıcı sekmesinden asla çıkmaz.
Paylaş
İlgili Araçlar
E-posta İmza Oluşturucu 30 şablon arasından profesyonel bir HTML e-posta imzası tasarlayın, özelleştirin ve kaydedin. Ücretsiz
Simgeden PNG'ye Bootstrap Icons, Font Awesome ve diğerlerini özel PNG görsellerine dönüştür — ücretsiz, tarayıcında. Ücretsiz
Uygulama Simgesi Oluşturucu App Store ve Google Play için eksiksiz, mağazaya hazır bir uygulama simgesi seti oluşturun — logonuzdan üretilen birinci sınıf gradyan, mesh ve desen arka planları. Ücretsiz
Favicon Oluşturucu Bir logodan, bir yazı tipi simgesinden veya bir monogramdan eksiksiz bir favicon paketi oluşturun — favicon.ico, modern PNG'ler, Apple touch simgesi, PWA simgeleri, bir web manifesti ve HTML parçacığı. Ücretsiz
CSS Box Shadow Oluşturucu Kaydırıcılarla offset, bulanıklık, yayılım, renk, opaklık ve iç gölge seçeneklerini ayarlayarak katmanlı CSS box-shadow'lar oluşturun — gerçek bir öğede önizleyin ve yapıştırmaya hazır CSS'yi anında kopyalayın. Ücretsiz
CSS Köşe Yarıçapı Oluşturucu CSS border-radius'u canlı önizlemeyle görsel olarak tasarlayın ve üretime hazır kodu kopyalayın. Ücretsiz
Popüler aramalar
flexbox deneme alanı css flexbox oluşturucu flex kapsayıcı oluşturucu justify-content align-items aracı css flex düzen oluşturucu flexbox görselleştirici flexbox kod oluşturucu
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.
Sorun bildir

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.