Flexbox-mönster Det ultimata CSS Flexbox-kodbiblioteket

Den nyaste CSS-flexboxegenskapen har radikalt förändrat hur utvecklare skapar gränssnitt. Inga fler floats och CSS hackar för att få layouter anpassade perfekt. Inte längre oroande för anpassade responsiva tekniker för hantering av flerkolonnerade layouter.

Men trots att flexbox löser många problem är det också komplicerat att lära sig. För att hjälpa dig att komma igång finns ett nytt onlinebibliotek som heter Flexbox Patterns, som katalogiserar många olika flexboxelement till en central plats.

Biblioteket är helt gratis att använda och det är öppet på GitHub. Alla exemplen kan vara hämtas lokalt genom NPM eller genom GitHub. Men du kan också bläddra igenom exemplen via webbplatsen för att kopiera och klistra in koder efter behov.

Varje mönster har sin egen sida med en kort beskrivning och kodprover. Du kan ganska bokstavligen kopiera och klistra in koderna i ditt befintliga webbprojekt, även om det rekommenderas att du först lär dig lite om vad koden gör och varför du använder den.

Ta till exempel sidhuvudmenyns demo med flexbox för att justera alla element i en navbarns sida vid sida sida vid sida.

Vanligtvis skulle detta kräva flottor och en clearfix-klass för att få allt på rätt sätt.

Med flexbox kan du hålla allt i en behållare med hjälp av display: flex fast egendom. På så sätt kan du definiera hur elementen ska interagera med varandra och hur flexboxen ska fungera på mindre skärmar.

Mönstren uppdateras kontinuerligt och det aktuella biblioteket fokuserar på de vanligaste elementen som flikar, sidofält och vertikal / horisontell centrering.

Om du är helt ny på flexbox så kolla in Flexbox Patterns. Webbplatsen kommer inte att lära dig alla grunderna för flexbox men det kommer att erbjuda verkliga exempel du kan tinker med för dina egna webbprojekt.