Generatore Flexbox

Il generatore Flexbox è un parco giochi visivo per il layout flessibile della scatola CSS Impostare le proprietà del contenitore con menu e un dispositivo di scorrimento delle lacune, 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.

Ecco il generatore di flexbox CSS che costruisce una tipica barra di navigazione A partire dalle impostazioni predefinite, imposta justify-content su space-between e allinea-items su center I cinque elementi di anteprima si diffondono ai bordi della riga e le liste di box CSS generate visualizzano: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; allinea-items: center; gap: 16px; cambia flex-wrap per avvolgere e appare una linea allinea-contenuto, perché conta solo una volta che gli elementi possono avvolgere Drag Gap a 0 e la linea di gap esce dalla regola.

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.