Vzorci Flexbox The Ultimate CSS Knjižnica Flexbox kode

Najnovejša lastnost CSS flexbox je korenito spremenila način, kako razvijalci ustvarjajo vmesnike. Nič več floats in CSS hacks, da bi postavitve poravnane popolnoma. Nič več vas ne sme skrbeti za odzivne tehnike po meri za rokovanje večstolpskih postavitev.

Toda čeprav flexbox rešuje veliko težav, je tudi zapleteno. Za začetek je na voljo nova spletna knjižnica Flexbox Patterns, ki katalogizira različne elemente flexbox v eno osrednjo lokacijo.

Ta knjižnica je popolnoma brezplačna za uporabo in je odprta z izvorom na GitHubu. Vsi primeri so lahko lokalno prek NPM ali preko GitHub. Lahko pa tudi pregledate primere prek spletne strani, da kopirate in prilepite kode, kot je potrebno.

Vsak vzorec ima svojo stran s kratkim opisom in vzorčnimi kodami. Lahko dobesedno kopirajte in prilepite kode v obstoječi spletni projekt, čeprav je priporočljivo, da se najprej nekaj naučite o tem, kaj koda deluje in zakaj jo uporabljate.

Vzemite na primer demo glave vrstice mesta z uporabo flexboxa, da uskladite vse elemente v zgornji navbar ob strani.

Običajno bi to zahtevalo plovec in razred clearfix, da bi vse pravilno poravnalo.

S flexboxom lahko držite vse v enem vsebniku z uporabo prikaz: flex nepremičnine. Tako lahko določiti, kako naj elementi vplivajo med seboj in kako flexbox delovati na manjših zaslonih.

Vzorci se stalno posodabljajo in trenutna knjižnica se osredotoča na najpogostejše elemente, kot so zavihki, stranske vrstice in navpično / horizontalno centriranje.

Če ste popolnoma novi v flexboxu, potem zagotovo preverite Flexbox Patterns. Spletna stran vas ne bo naučila vseh osnov flexbox-a, vendar bo nudila primere iz resničnega sveta, s katerimi se lahko lotite za svoje spletne projekte.