Modelli Flexbox L'ultima libreria di codici CSS Flexbox

La nuova proprietà CSSbox CSS ha cambiato radicalmente il modo in cui gli sviluppatori creano interfacce. Non più float e hack CSS per allineare perfettamente i layout. Non dovrai più preoccuparti delle tecniche di risposta personalizzate per la gestione di layout a più colonne.

Ma anche se la flexbox risolve molti problemi, è anche complicato da imparare. Per aiutarti a iniziare, c'è una nuova libreria online chiamata Flexbox Patterns che cataloga molti elementi Flexbox in una posizione centrale.

Questa libreria è completamente gratuita e open source su GitHub. Tutti gli esempi possono essere scaricato localmente tramite NPM o attraverso GitHub. Ma puoi anche sfogliare gli esempi attraverso il sito web per copiare e incollare i codici secondo necessità.

Ogni modello ha una sua pagina con una breve descrizione e esempi di codice. Puoi letteralmente copia e incolla i codici nel tuo progetto web esistente, anche se è consigliabile prima imparare un po 'su cosa fa il codice e perché lo stai usando.

Prendiamo ad esempio la demo della barra di intestazione del sito usando flexbox per allineare tutti gli elementi in una barra laterale superiore side-by-side.

In genere questo richiederebbe float e una classe clearfix per ottenere tutto allineato correttamente.

Con la flexbox puoi tenere tutto in un unico contenitore usando il display: flex proprietà. In questo modo puoi definire come gli elementi dovrebbero interagire l'uno con l'altro e come la flexbox dovrebbe funzionare su schermi più piccoli.

I pattern vengono costantemente aggiornati e la libreria corrente si concentra sugli elementi più comuni come tabulazioni, barre laterali e centraggio verticale / orizzontale.

Se sei nuovo di zecca in Flexbox, allora dai un'occhiata ai modelli di Flexbox. Il sito non ti insegnerà tutte le nozioni di base di flexbox ma offrirà esempi del mondo reale con cui potrai armeggiare per i tuoi progetti web.