Flexbox Patterns Ultimate CSS Flexbox koda bibliotēka

Jaunākais CSS flexbox īpašums ir radikāli mainījis veidu, kā izstrādātāji izveido saskarnes. Ne vairāk peldlīdzekļi, ne CSS nesaņem perfektu izkārtojumu. Ne vairāk jāuztraucas par pielāgotām atbildes paņēmieniem vairāku kolonnu izkārtojumu apstrādei.

Bet, lai gan flexbox atrisina daudzas problēmas, ir sarežģīti mācīties. Lai palīdzētu jums sākt darbu, ir jauna tiešsaistes bibliotēka, ko sauc par Flexbox Patterns, kas kataloģē daudzus dažādus flexbox elementus vienā centrālā vietā.

Šī bibliotēka ir pilnīgi brīva lietošanai, un tā ir atvērta no GitHub. Visi piemēri var būt lejupielādēts lokāli, izmantojot NPM vai caur GitHub. Bet varat arī pārlūkot piemērus, izmantojot tīmekļa vietni, lai kopētu un ielīmētu kodus pēc nepieciešamības.

Katram modelim ir sava lapa ar īsu aprakstu un kodu paraugiem. Jūs varat gluži burtiski kopējiet un ielīmējiet kodus savā esošajā tīmekļa projektā, lai gan tas ir ieteicams vispirms nedaudz uzzināt par to, ko kods dara un kāpēc to lietojat.

Piemēram, izmantojiet vietnes galvenes joslas demonstrāciju, izmantojot flexbox, lai saskaņotu visus augšējā navigācijas joslas elementus blakus.

Parasti tas prasītu pludiņus un klīringa klasi, lai iegūtu visu saskaņotu.

Ar flexbox jūs varat turēt visu vienā konteinerā, izmantojot displejs: flex īpašums. Tādā veidā jūs varat definēt, kā elementiem vajadzētu mijiedarboties savstarpēji un kā flexbox vajadzētu darboties mazākos ekrānos.

Modeļi tiek pastāvīgi atjaunināti, un pašreizējā bibliotēka koncentrējas uz visbiežāk sastopamajiem elementiem, piemēram, cilnēm, sānjoslām un vertikālo / horizontālo centrēšanu.

Ja jūs esat pilnīgi jauns, jūs noteikti pārbaudiet Flexbox Patterns. Vietne netiks iemācīta visiem flexbox pamatiem, bet tā piedāvās reālus piemērus, ko varat izmantot, izmantojot savus tīmekļa projektus.