Generatore flexbox CSS
Crea visivamente un contenitore flex e i suoi elementi, quindi copia il CSS, le classi Tailwind o lo stile inline.
Generatore flexbox CSS
Definisci flex-direction, flex-wrap, justify-content, align-items e align-content dai menu a discesa, aggiungi uno spazio in qualsiasi unità, e questo strumento scrive la regola del contenitore flex — insieme a una regola corrispondente per i suoi elementi e un'anteprima che mostra come si allineano i riquadri. Usalo per schizzare una barra di navigazione, una riga di schede, una barra degli strumenti del modulo o qualsiasi layout che richieda elementi distribuiti, centrati o avvolti senza ricorrere a una griglia completa.
I controlli degli elementi applicano flex-grow, flex-shrink e flex-basis uniformemente a tutti gli elementi che scegli, che è esattamente come funzionano la maggior parte dei veri flex row: una classe di elemento che governa più scatole piuttosto che valori individuali per scatola. Align-content appare nell'output solo quando flex-wrap è impostato su wrap o wrap-reverse, perché i browser lo ignorano altrimenti — lo strumento non stampa mai una dichiarazione che non ha effetto.
Scegli il formato di output che corrisponde al modo in cui costruisci: CSS semplice per un foglio di stile, classi di utilità Tailwind (le parentesi di valore arbitrario coprono spazi e basi che non rientrano nella scala di spaziatura predefinita), o un attributo di stile inline per un prototipo veloce o markup sicuro per e-mail. Ogni valore si aggiorna nel momento in cui modifichi un'opzione, e l'anteprima del layout si ridisegna — nessun passo di compilazione, nessun CSS esterno da caricare.
Tutto viene eseguito localmente nel tuo browser; nulla di ciò che configuri qui viene inviato da nessuna parte. Quando il CSS ti sembra giusto, copialo, scaricalo come file .txt, o rimandalo all'input per continuare a iterare con un altro strumento.