Son kullanılanlar

    Açtığınız araçlar burada görünür.

    CSS Flexbox Deneme Alanı

    Flexbox düzenlerini öğrenmek ve oluşturmak için etkileşimli deneme alanı

    Bu aracı paylaş

    Sorun bildir

    Sorunu, özel girdilerinizi veya dosyalarınızı eklemeden açıklayın.

    Bu araç ne kadar faydalıydı?

    Bu araç ne kadar faydalıydı?

    Yerleşim ayarları

    Hazır yerleşimler

    Öğeye özel ayarlar

    Özelliklerini düzenlemek için önizlemeden veya listeden bir öğe seçin.

    Flexbox hızlı başvuru

    Ana eksen

    justify-content, ana eksen boyunca hizalamayı denetler (flex-direction ile belirlenir).

    Çapraz eksen

    align-items, çapraz eksen boyunca hizalamayı denetler (flex-direction'a dik).

    Çok satırlı

    align-content yalnızca flex-wrap, birden fazla satırla wrap veya wrap-reverse olarak ayarlandığında uygulanır.

    Canlı önizleme

    Oluşturulan CSS

    .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

    Ayarları değiştirin veya bir öğe seçin. Önizleme ve CSS birlikte güncellenir.

    CSS Flexbox Deneme Alanı hakkında

    CSS Flexbox Deneme Alanı, CSS Flexbox düzenlerini öğrenmek ve denemek için görsel, etkileşimli bir araçtır. Flexbox (esnek kutu düzeni), kapsayıcı içindeki öğeleri esnek ve duyarlı davranışla yerleştirmek için tasarlanmış, en güçlü ve yaygın kullanılan CSS düzen modüllerinden biridir. Bu araç, her flex kapsayıcısı ve flex öğesi özelliğini gerçek zamanlı değiştirmenizi ve düzeninizin nasıl değiştiğini tam olarak görmenizi sağlar.

    Tasarım

    Yeni eklenenler

    Tüm araçlar

    Gizlilik ayarları

    Analiz, reklam ve kişiselleştirme tercihlerinizi seçin. Zorunlu depolama, tema ve kaydedilen araçlar gibi özelliklerin çalışmasını sağlar.

    Zorunlu depolama her zaman etkindir.