Vai al contenuto principale
LibraTool logoLibraTool

Generatore CSS Flexbox gratis

Sperimenta con direzione flex, wrap, justify e align su elementi dal vivo — e copia il CSS.

Funziona offline una volta caricato
Predefiniti

Suggerimento: fai clic su un elemento nell'anteprima per attivare/disattivare flex-grow: 1 su di esso.

Anteprima dal vivo
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>

🔒 Tutto viene eseguito nel tuo browser — nulla viene caricato.

Come funziona

Un'area di prova interattiva per flexbox: cambia flex-direction, wrap, justify-content e align-items e guarda fino a 10 elementi dal vivo riorganizzarsi istantaneamente. Fai clic su qualsiasi elemento per dargli flex-grow: 1 e vedi come si prende lo spazio. Il CSS si aggiorna dal vivo, pronto per essere copiato nel tuo progetto.

  1. 1
    Imposta il contenitore
    Direzione, wrap, justify-content, align-items, gap.
  2. 2
    Aggiungi elementi
    Da uno a dieci elementi flex numerati.
  3. 3
    Sperimenta
    Clicca un elemento per attivare/disattivare flex-grow e vedere l'effetto.
  4. 4
    Copia il CSS
    Le regole del contenitore (e dell'elemento), pronte da incollare.

Tutto funziona nel tuo browser — nulla viene caricato.

Strumenti correlati

🟦

Generatore CSS Grid

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Prova
🌈

Generatore Gradienti CSS

Crea gradienti CSS lineari, radiali e conici con anteprima live. Copia il CSS con un clic.

Prova
🎨

Generatore CSS Box Shadow

Costruttore visivo per CSS box-shadow con anteprima live, sovrapposizione multi-strato, selettore colori, toggle inset e copia con un clic. Include preset Material, neumorfismo e bagliore.

Prova

Domande frequenti