Əsas məzmuna keç
LibraTool logoLibraTool

Pulsuz CSS Flexbox Generatoru

Flex istiqaməti, qapanma, haqlı və düzəltmə ilə canlı elementlər üzərində eksperiment edin — və CSS-i kopyalayın.

Bir dəfə yükləndikdən sonra oflayn işləyir
Şablonlar

Məsləhət: önizləmədə flex-grow: 1 aç/kapa etmək üçün element seçin.

Canlı önizləmə
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>

🔒 Hər şey tarayıcınızda işləyir — heç nə yüklənmir.

Necə İşləyir

İnteraktiv bir flexbox oyun meydanı: flex-direction, wrap, justify-content və align-items arasında keçin və 10-a qədər canlı elementin ani olaraq yenidən düzülməsinə baxın. flex-grow: 1 vermək üçün istənilən elementə klikləyin və onun necə yer tutduğunu görün. CSS canlı yenilənir, layihənizə kopyalamağa hazır.

  1. 1
    Konteyneri təyin edin
    İstiqamət, sarma, justify-content, align-items, boşluq.
  2. 2
    Elementlər əlavə edin
    Bir ilə on arasında nömrələnmiş flex elementi.
  3. 3
    Eksperiment edin
    flex-grow-u keçidləmək və effekti görmək üçün bir elementə klikləyin.
  4. 4
    CSS-i kopyalayın
    Konteyner (və element) qaydaları, yapışdırmağa hazır.

Hər şey brauzerinizdə işləyir — heç nə yüklənmir.

Əlaqəli Alətlər

🟦

CSS Grid Generatoru

CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.

Sınayın
🌈

CSS Qradient Generatoru

Canlı önizləmə ilə xətti, radial və konik CSS qradientlər yaradın. CSS-i bir klikdə kopyalayın.

Sınayın
🎨

CSS Qutu Kölgə Generatoru

Canlı önizləmə, çox qatlı yığım, rəng seçici, daxili keçiş və bir klikdə kopyalama ilə CSS qutu kölgəsi üçün vizual qurucusu. Material, neymorfizm və parlaqlıq əvvəlcədən hazırlanmış parametrləri daxildir.

Sınayın

Tez-tez Verilən Suallar