Vzory Flexbox The Ultimate CSS Flexbox Code Library

Nejnovější vlastnost CSS flexbox radikálně změnila způsob, jakým vývojáři vytvářejí rozhraní. Žádné další plováky a hacky CSS nenabízejí perfektní uspořádání. Už žádné starosti o vlastní citlivé techniky pro manipulaci s více sloupcovými rozvrženími.

Ale i když flexbox řeší mnoho problémů, je také obtížné se učit. Abychom vám pomohli začít, je zde nová online knihovna nazvaná Flexbox Patterns, která katalogizuje mnoho různých prvků flexboxu do jednoho centrálního umístění.

Tato knihovna je zcela zdarma a je otevřená z GitHubu. Všechny příklady mohou být místně přes NPM nebo přes GitHub. Můžete však také procházet příklady prostřednictvím webových stránek a kopírovat a vkládat kódy podle potřeby.

Každý vzor má svou vlastní stránku s krátkým popisem a ukázkami kódu. Můžete to doslova zkopírujte a vložte kódy do stávajícího webového projektu, ačkoliv se doporučuje, abyste se nejprve dozvěděli něco o tom, co kód dělá a proč ho používáte.

Vezměte si například demo záhlaví webu pomocí flexboxu, abyste zarovnali všechny prvky v horní horní liště vedle sebe.

Obvykle by to vyžadovalo plováky a třídu clearfix, aby bylo vše správně zarovnáno.

S flexboxem můžete držet vše v jednom kontejneru pomocí displej: flex vlastnictví. Tímto způsobem můžete definovat interakci prvků a jak se flexbox by měly fungovat na menších obrazovkách.

Vzory jsou neustále aktualizovány a aktuální knihovna se zaměřuje na nejběžnější prvky, jako jsou karty, postranní panely a vertikální / horizontální centrování..

Pokud jste zbrusu nový Flexbox pak určitě podívejte se na Flexbox vzory. Stránky vás naučí všechny základy flexboxu, ale nabídne vám příklady z reálného světa, které si můžete zahrát s vlastními webovými projekty..