Skip to main content
Penguin ToolsPenguen Araçları

CSS Flexbox Oluşturucu

Flexbox düzenlerini görsel olarak oluşturun ve CSS kodu üretin. Yerleşik kopya kağıdıyla tüm özellikleri ayarlayın.

Konteyner Ayarları

Önizleme

flex container
1
2
3
4

Oluşturulan CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}
Aracı paylaş
📖

Nasıl Kullanılır

Step 1

Özellikleri Ayarlayın

Özellikleri Ayarlayın

Flexbox özelliklerini seçin

Step 2

Önizleyin

Önizleyin

Düzeni gerçek zamanlı önizleyin

Step 3

Kopyalayın

Kopyalayın

Kullanmak için CSS kodunu kopyalayın

✨

Özellikler

Görsel Düzenleyici

Tüm Flex özelliklerini görsel olarak kontrol edin

Alt Öğe Ayarları

Alt öğe sayısını ve boyutunu ayarlayın

Kopya Kağıdı

Flexbox özellik referansı içerir

❓

FAQ

1D düzenler (satır veya sütun) için CSS düzen modeli.

🔗İlgili Araçlar

🎨
Tasarım Araçları

Renk Kodu Dönüştürücü

HEX, RGB ve HSL renk kodları arasında dönüştürme yapın. Sezgisel renk seçimi için renk seçici ve gerçek zamanlı önizleme kullanın.

🎨
Tasarım Araçları

Renk Seçici

Renk çarkı ve kaydırıcılar kullanarak renkleri sezgisel olarak seçin. HEX, RGB ve HSL formatlarında renk kodlarını alın ve kopyalayın.

🎨
Tasarım Araçları

Görsel Renk Çıkarıcı

Bir görselden baskın renkleri otomatik olarak tespit edin ve renk paleti oluşturun. Ayrıca tek tek renkler seçmek için görselin herhangi bir yerine tıklayabilirsiniz.

🎯
Tasarım Araçları

Görsel Ortalama Renk Seçici

Tüm bir görselin veya seçili bir alanın ortalama rengini hesaplayın. Renk şemaları veya küçük resim arka plan renkleri seçmek için kullanışlı.

🌈
Tasarım Araçları

CSS Degrade Oluşturucu

Sürükleme kontrolleriyle CSS degradelerini görsel olarak oluşturun. Ön ayarlarla doğrusal, radyal ve konik degrade türlerini destekler.

🔲
Tasarım Araçları

CSS Box Shadow Oluşturucu

Kaydırıcılarla görsel olarak CSS box-shadow oluşturun. Çoklu gölgeler ve iç gölgeleri destekler.