Salt la conținutul principal
LibraTool logoLibraTool

Generator CSS Flexbox — gratuit

Experimentați cu direcție flex, înfășurare, justificare și aliniere pe elemente în direct — și copiați CSS-ul.

Funcționează offline odată încărcat
Presetări

Sfat: faceți clic pe un element din previzualizare pentru a comuta flex-grow: 1 pe el.

Previzualizare în direct
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>

🔒 Totul rulează în browser — nimic nu este încărcat.

Cum funcționează

Un teren de joacă interactiv flexbox: comută flex-direction, wrap, justify-content, și align-items și urmărește până la 10 elemente live rearanjându-se instant. Dă clic pe orice element pentru a-i da flex-grow: 1 și vezi cum revendică spațiu. CSS-ul se actualizează live, gata de copiat în proiectul tău.

  1. 1
    Setează containerul
    Direcție, wrap, justify-content, align-items, gap.
  2. 2
    Adaugă elemente
    Unu până la zece elemente flex numerotate.
  3. 3
    Experimentează
    Dă clic pe un element pentru a comuta flex-grow și a vedea efectul.
  4. 4
    Copiază CSS-ul
    Regulile containerului (și elementului), gata de lipit.

Totul rulează în browser-ul tău — nimic nu este încărcat.

Instrumente similare

🟦

Generator CSS Grid

Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.

Încearcă
🌈

Generator Gradient CSS

Creează gradiente CSS liniare, radiale și conice cu previzualizare live. Copiază CSS-ul cu un singur clic.

Încearcă
🎨

Generator Umbră CSS Box

Constructor vizual pentru box-shadow CSS cu previzualizare live, stivuire pe mai multe straturi, selector de culoare, comutator inset și copiere cu un clic. Include presetări Material, neumorfism și strălucire.

Încearcă

Întrebări frecvente