Flexbox Patterns Den ultimative CSS Flexbox Code Library

Den nyeste CSS flexbox-egenskab har radikalt ændret måden udviklere opretter grænseflader på. Ikke flere floats og CSS hacks at få layouter tilpasset perfekt. Ikke mere bekymrende for brugerdefinerede responsive teknikker til håndtering af multi-columned layouts.

Men selvom flexbox løser mange problemer, er det også kompliceret at lære. For at hjælpe dig med at komme i gang er der et nyt online bibliotek kaldet Flexbox Patterns, der katalogiserer mange forskellige flexbox elementer til en central placering.

Dette bibliotek er helt gratis at bruge, og det er åbent hentet fra GitHub. Alle eksemplerne kan være downloadet lokalt gennem NPM eller gennem GitHub. Men du kan også gennemse eksemplerne via hjemmesiden for at kopiere og indsætte koder efter behov.

Hvert mønster har sin egen side med en kort beskrivelse og kodeprøver. Du kan ret bogstaveligt kopiér og indsæt koderne i dit eksisterende webprojekt, selv om det anbefales at du først lærer lidt om, hvad koden gør, og hvorfor du bruger det.

Tag for eksempel site header bar demo ved hjælp af flexbox for at justere alle elementerne i en top navbar side om side.

Typisk ville dette kræve flyver og en clearfix klasse for at få alt justeret korrekt.

Med flexbox kan du holde alt i en beholder ved hjælp af display: flex ejendom. På den måde kan du definere hvordan elementerne skal interagere med hinanden og hvordan flexboxen skal fungere på mindre skærme.

Mønstrene opdateres løbende, og det nuværende bibliotek fokuserer på de mest almindelige elementer som flige, sidebjælker og lodret / vandret centrering.

Hvis du er helt ny til flexbox, skal du helt sikkert tjekke Flexbox Patterns. Webstedet vil ikke lære dig alt det grundlæggende i flexbox, men det vil give eksempler på virkelige eksempler, du kan tinker med til dine egne webprojekter.