Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS Flexbox Oluşturucu

Flex yönü, sarma, yaslama ve hizalama ile canlı öğeler üzerinde deney yapın — ve CSS'i kopyalayın.

Yüklendikten sonra çevrimdışı çalışır
Ön ayarlar

İpucu: flex-grow: 1'i açıp kapatmak için önizlemedeki bir öğeyi tıklayın.

Canlı önizleme
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

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

Nasıl çalışır

Etkileşimli bir flexbox oyun alanı: flex-direction, wrap, justify-content ve align-items değerlerini değiştirin ve 10'a kadar canlı öğenin anında yeniden düzenlendiğini izleyin. Bir öğeye flex-grow: 1 vermek ve nasıl alan kapladığını görmek için tıklayın. CSS canlı güncellenir, projenize kopyalamaya hazırdır.

  1. 1
    Kapsayıcıyı ayarlayın
    Yön, wrap, justify-content, align-items, gap.
  2. 2
    Öğe ekleyin
    Birden ona kadar numaralı flex öğesi.
  3. 3
    Deneyin
    flex-grow'u açıp kapatmak ve etkisini görmek için bir öğeye tıklayın.
  4. 4
    CSS'i kopyalayın
    Kapsayıcı (ve öğe) kuralları, yapıştırmaya hazır.

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

İlgili araçlar

🟦

CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Deneyin
🌈

CSS Gradyan Oluşturucu

Canlı önizlemeyle doğrusal, radyal ve konik CSS gradyanları oluşturun. CSS'i tek tıklamayla kopyalayın.

Deneyin
🎨

CSS Kutu Gölgesi Oluşturucu

Canlı önizleme, çok katmanlı yığın, renk seçici, iç gölge geçişi ve tek tıklamayla kopyalamayla CSS kutu gölgesi için görsel oluşturucu. Material, nömorfizm ve parıltı ön ayarları içerir.

Deneyin

Sık sorulan sorular