Modele Flexbox Cache Ultimate CSS Flexbox Code Library

Cea mai nouă proprietate CSS flexbox a schimbat radical modul în care dezvoltatorii creează interfețe. Nu mai plutiți și hack-uri CSS pentru a obține machete perfect aliniate. Nu vă mai faceți griji cu privire la tehnicile personalizate care răspund la manipularea mai multor coloane.

Dar chiar dacă flexbox rezolvă multe probleme este de asemenea complicat să înveți. Pentru a vă ajuta să începeți, există o nouă bibliotecă online numită Flexbox Patterns, care cataloghează multe elemente flexbox diferite într-o singură locație centrală.

Această bibliotecă este complet gratuită și este deschisă pe GitHub. Toate exemplele pot fi descărcat local prin NPM sau prin GitHub. Dar puteți căuta și exemplele prin intermediul site-ului web pentru a copia și a insera codurile după cum este necesar.

Fiecare model are o pagină proprie cu o scurtă descriere și un eșantion de cod. Puteți chiar literalmente copiați și inserați codurile în proiectul web existent, deși este recomandat să aflați mai întâi câteva lucruri despre ceea ce face codul și de ce îl utilizați.

Luați, de exemplu, demo-ul barei de antet a site-ului utilizând flexbox pentru a alinia toate elementele dintr-o navbar de sus-sus.

De obicei, acest lucru ar necesita flotoare și o clasă clarfix pentru a obține totul aliniat corect.

Cu flexbox puteți ține totul într - un singur container folosind afișare: flex proprietate. În acest fel poți definiți modul în care trebuie să interacționeze elementele unul cu altul și modul în care flexboxul ar trebui să funcționeze pe ecrane mai mici.

Modelele sunt actualizate în mod constant, iar biblioteca actuală se concentrează pe elementele cele mai comune, cum ar fi filele, barele laterale și centrarea verticală / orizontală.

Dacă sunteți nou în flexbox, atunci verificați definitiv Flexbox Patterns. Site-ul nu vă va învăța toate elementele de bază ale flexbox-ului, dar vă va oferi exemple din lumea reală cu care vă puteți dezvolta propriile proiecte web.