.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Che cos'è il Flexbox Generator?
Il generatore Flexbox è un parco giochi visivo per il layout flessibile della scatola CSS Impostare le proprietà del contenitore con pulsanti e cursori, guardare un'anteprima live riorganizzare gli elementi in tempo reale e copiare il CSS esatto che l'anteprima sta utilizzando Rimuove le congetture dal ricordare quale proprietà fa cosa, in modo da poter costruire una riga, una colonna, un layout centrato o una griglia di carte di incarto senza tentativi ed errori negli strumenti di sviluppo del browser.
Flexbox è un modello di layout unidimensionale: gli elementi sono disposti lungo un asse principale e allineati sull'asse trasversale Il contenitore guida quasi tutto attraverso sei proprietà La direzione flessibile sceglie l'asse principale e se corre in avanti o indietro Il contenuto giustifica distribuisce lo spazio libero lungo l'asse principale Gli elementi di allineamento posizionano gli elementi sull'asse trasversale L'involucro flessibile decide se gli elementi traboccano su nuove linee e il contenuto di allineamento distanzia tali linee una volta terminato lo spazio aggiunge una spaziatura coerente tra gli elementi senza margini.
Questo strumento espone tutte quelle proprietà in un unico posto e mostra immediatamente il risultato Poiché l'anteprima viene renderizzata con le stesse dichiarazioni che appaiono nella casella di output, ciò che vedi è esattamente ciò che ottieni quando incolli il CSS nel tuo foglio di stile La regola generata mira a una classe 'container per impostazione predefinita ed elenca solo le proprietà che contano, incluso il contenuto allinea solo quando il wrapping è abilitato, poiché non ha alcun effetto su una singola riga.
Tutto viene eseguito interamente nel browser Non c'è iscrizione, non viene caricato nulla e lo strumento continua a funzionare offline una volta caricata la pagina È altrettanto utile come aiuto all'apprendimento per capire come interagiscono le proprietà flex e come modo rapido per produrre CSS pronti per la produzione Cambia il numero di elementi di anteprima, ridimensiona il contenitore nella tua testa e leggi la dichiarazione che produce l'allineamento che desideri, che si tratti di una navbar distribuita con spazio tra o di una sezione eroe perfettamente centrata su entrambi gli assi.
Come utilizzare il Flexbox Generator?
Scegli la direzione e avvolgi
Scegli la direzione flessibile e se gli articoli devono avvolgersi su più linee.
Imposta allineamento
Regola justify-content sull'asse principale e allinea-item sull'asse trasversale finché l'anteprima non corrisponde al tuo layout.
Spaziatura tune
Imposta lo spazio tra gli elementi e, quando è attivo il wrapping, il contenuto di allineamento che distanzia le linee.
Copia il CSS
La regola generata si aggiorna in diretta Copiala con un clic e incollalala nel tuo foglio di stile.
Caratteristiche principali
Anteprima dal vivo
Un contenitore di elementi di esempio si rifà istantaneamente quando si modificano le proprietà, in modo da vedere il layout prima di copiare qualsiasi codice
Ogni proprietà del contenitore
Display di controllo, direzione flessibile, avvolgimento flessibile, contenuto giustificato, elementi allineati, contenuto allineato e spazio da un pannello
Quello che vedi è quello che ottieni
L'anteprima utilizza le stesse dichiarazioni dell'output, quindi il CSS copiato produce esattamente il layout sullo schermo
Pulito, uscita minima
La regola generata elenca solo le proprietà significative e omette il contenuto di allineamento finché il wrapping non viene attivato
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!