Flexbox Patterns Konečná CSS Flexbox Code Library

Najnovšia vlastnosť CSS flexbox radikálne zmenila spôsob, akým vývojári vytvárajú rozhrania. Žiadne ďalšie plaváky a CSS hacks dostať rozloženie dokonale zarovnané. Už viac sa neobávajte o vlastných technikách reagujúcich na manipuláciu s viacerými stĺpcami.

Ale aj keď flexbox rieši mnohé problémy, je to aj zložité učiť sa. Aby ste mohli začať, existuje nová online knižnica s názvom Flexbox Patterns, ktorá katalogizuje mnoho rôznych prvkov flexboxu do jedného centrálneho umiestnenia.

Táto knižnica je úplne zadarmo na použitie a je otvorená na stránkach GitHub. Všetky príklady môžu byť stiahnuté lokálne cez NPM alebo cez GitHub. Ale môžete tiež prezerať príklady prostredníctvom webových stránok a kopírovať a prilepiť kódy podľa potreby.

Každý vzor má svoju vlastnú stránku so stručným popisom a vzorky kódu. Môžete to celkom doslovne skopírujte a vložte kódy do svojho existujúceho webového projektu, hoci sa odporúča, aby ste sa najprv dozvedeli niečo o tom, čo kód robí a prečo ho používate.

Vezmite si napríklad demo s hlavičkou panelu stránok pomocou flexboxu, aby ste zarovnali všetky prvky v hornej navbar side-by-side.

Obvykle by to vyžadovalo plaváky a triedu clearfix, aby ste všetko zarovnali správne.

S flexboxom môžete držať všetko v jednom kontajneri pomocou displej: flex vlastnosť. Týmto spôsobom môžete definujte, ako by mali elementy interagovať spolu so sebou a ako flexbox by mali fungovať na menších obrazovkách.

Vzory sa priebežne aktualizujú a aktuálna knižnica sa zameriava na najbežnejšie prvky, ako sú karty, postranné lišty a vertikálne / horizontálne centrovanie.

Ak ste úplne nový na flexbox, potom rozhodne skontrolujte Flexbox Patterns. Táto stránka vás nenaučí všetkým základom flexboxu, ale ponúkne vám reálne príklady, ktoré môžete použiť pre svoje vlastné webové projekty.