Flexbox för framtiden

Vi som har byggt upp webbplatser med HTML och CSS har oftast fått bekanta oss med ordet “float”. Detta är en guide skriven till de som vill ta webbutvecklandet ett steg längre, och dessutom vill använda sig av en toppmodern arbetsmetod.

Vad är då float? Float används för att positionera ett element på webbsidan antingen till höger eller till vänster. Till exempel, du har ett bildelement och ett textelement, och vill att dessa skall ligga sida vid sida med bilden till vänster och texten till höger. Det populäraste sättet att göra detta på i HTML5 och CSS3 borde således vara att ge dessa element var sin “Float”. Ger du bilden en float: left; och texten en float: right; så har du talat om för dessa element vart de skall befinna sig i din design. Det låter väl bra?

Detta tillvägagångsätt var även något vi fick lära oss i skolan under vintern 2013 och jag har personligen använt det sen dess, fram tills någon gång under hösten 2015 när jag upptäckte fenomenet “flexbox”.

Innan vi ger oss in på flexbox tänkte jag lyfta fram de mindre bra sidorna hos floats.

För det första, så får vi många gånger använda oss av floats systervärde “clear”. Clear används för att förklara för nästkommande objekt att hamna nedanför objektet som är floatat. Till exempel, skulle vår text vara kortare än bilden, och vi placerar ett till objekt som vi vill skall hamna nedanför både bild och text, så kommer det i de flesta fall hamna under texten, men inte under bilden då detta objekt har större höjd. Därför måste vi ge vårt nästkommande objekt värdet “clear: both;” för att det skall hamna rätt. Det kanske inte låter som en jättestor ansträngning, men vi är trots allt webbutvecklare och många av oss strävar efter att dra ner på mängden kod för att låta sidan ladda snabbare. Dessutom kan värdet clear tvunget behöva användas en mängd gånger ifall vi har diverse så kallade “media-queries” på sidan för att layouten ändras vid olika skärmstorlekar, och det blir extra kodskrivande på grund av det.

En av svagheterna hos floats är att det ej ger objekten samma höjd som varandra (Menezes, 2014). Säg till exempel att vi har tre stycken textrutor med blå bakgrund som skall ligga på rad bredvid varandra. Ett av textstyckena är lite kortare än de andra två och då faller det naturligt att även den blåa bakgrunden, som får sin höjd utav texten, blir kortare. Vi får då ge alla tre textrutor en angiven höjd, för att de skall vara lika höga. I samband med en storleksändring på skärmen kommer texterna bli högre automatiskt då de blir smalare, och därmed kommer ännu en gång den blåa bakgrunden att påverkas tillslut och ej ha samma höjd som de andra två rutorna, och ytterliggare kod får skrivas för att vår bakgrund skall vara lika hög.

floats

Ett exempel på ovanstående scenario, när textrutorna ej har samma höjd

Nu gör vi det enkelt och använder Flexbox!

Flexbox som denna guide nu skall handla om, löser detta problemet samt ger oss väldigt många fler möjligheter! Enligt Karen Menezes är flexbox bortom dina vildaste fantasier om hur css layout kan göras och helt enkelt utmärkt att arbeta med! (Menezes, 2014).

Vad är då flexbox? Idén bakom flexbox är att göra en container som kan justera längd, bredd och ordning på dess innehåll för att fylla ytan vi har på enklast sätt. Kortfattat så löser den vårt ovanstående problem genom att automatiskt ge rutan i mitten samma höjd på den blåa bakgrunden som sina syskon bredvid. Men den har också en rad andra fördelaktiga funktioner.

Flexbox är utvecklad för att, som det låter, vara flexibel. Nu när det finns så många olika skärmstorlekar är det här en skottsäker metod för att innehållet skall följa din design utan att du behöver arbeta för mycket med media-queries och tynga ner sidan med massor av kod.

Det första steget i att skapa en så kallad flexbox är att ge en container attributet display: flex;. Nu har vi sagt till containern att innehållet skall positionera sig enligt flexbox principen, och det som återstår är nu att positionera innehållet så som vi vill ha det.

 

En av flexbox trevliga funktioner är att vi till exempel kan positionera om vårat innehåll i flexbox-containern både vertikalt och hoirisontellt (Menezes, 2014). Vi skriver in flex-direction: och sedan väljer vi hur innehållet skall löpa:

 

row: från vänster till höger.

row-reverse: från höger till vänster.

column: top till botten.

column-reverse: botten till toppen.

 

Från början kommer alla objekt i en flexbox att hamna på en enskild rad. Vi kan dock ändra på detta genom en så kallad flex-wrap.

 

nowrap: allt på en enskild rad (dvs, som det är från början).

wrap: här används så många rader som behövs för att allt innehåll skall få plats

wrap-reverse: som innan, fast åt andra hållet

 

Vi har sedan en funktion som är en av mina favoriter, nämligen justify-content. Här har vi möjligheten att välja hur innehållet skall förhålla sig till varandra innuti containern längs huvudaxeln vi valt tidigare med flex direction, och vart det skall positioneras mer exakt. Glöm marginaler som behöver ändras vid olika skärmstorlekar, nu har vi istället justify-content att jobba med. Ett exempel kan vara att positionera 3 stycken ikoner bredvid varandra vertikalt i mitten av containern, och de kommer alltid att hålla sig där.

 

flex-start: här positioneras objekten i starten av flexboxen, bra ifall vi t.ex. vill ha alla ikoner längst till vänster i containern.

 

flex-end: tvärtom emot flex-start.

 

center: i mitten av containern.

 

space-between: objekten får allihopa lika mycket mellanrum mellan varandra, första objektet på startlinjen, sista objektet på sista linjen.

 

space-around: min personliga favorit då man med denna funktion undviker mycket onödig kod. Väldigt lik space-between, men skillnaden här är att första och sista objektet även får marginaler åt sidorna, likt bilden här under.

space-aroundFlex-direction: row; och justify-content: space-around;

Slutligen för denna guide har vi “align-items”. Detta är precis som ovanstående funktion, skillnaden är att vi nu arbetar med den motsvarande axeln mot den vi valt. Har vi exempelvis valt att ha en horisontell axel, så påverkar align-items den vertikala axeln, och vi har ni full kontroll över innehållets positionering.

 

flex-start, flex-end och center hänger med från föregående exempel, men nu har vi även fått två funktioner extra:

 

stretch: stretchar innehållet till containerns maxhöjd/bredd. Har vi en tre rutor som ligger i rad horisontellt innuti containern, blir dessa nu stretchade på höjden så de fyller hela containern, utan att påverka containerns höjd.

 

baseline: innehållet placeras enligt dess baslinje (har vi t.ex. tre textstycken, är deras baslinje den första textraden).

 

Slutligen

Nu har vi gått igenom en liten grundläggande del av flexbox. Värt att notera är att det finns ännu fler funktioner än de jag tagit upp. Nu har vi endast påverkat själva huvudcontainern med kod, men vi kan även anropa de enskilda objekten inuti vår flexbox.  Vi kan bland annat få dem att växa i storlek, eller anropa ett enskilt objekt i vår flexbox som vi till exempel skall vara på en annan plats än de övriga. Mitt tips är att började med att anropa huvudcontainern som vi gör i uppgiften nedan, sedan vidareutveckla kunskaperna när grunderna sitter.

Hur fungerar detta då med olika webbläsare?

caniuse

Som ni ser på bilden är det bara Internet-explorer 8 och 9 som inte stödjer flexbox (Caniuse, 2015). Dock är detta inget stort problem då det är så pass få som fortfarande använder dessa webbläsare. Enligt Craig Bucklers rapport från Januari 2015, var det endast cirka 6.5% i världen som använder dessa webbläsare (Buckler, 2015). Nu har det gått ett helt år sedan dess, så förmodligen är det ännu färre nu. Microsoft gick i Januari 2016 ut med att de slutar med säkerhets samt tekniska uppdateringar för deras äldre webbläsare och uppmanar användarna att uppgradera sig till Internet-explorer 11 (Microsoft, 2016). Detta gör nu att flexbox tid är inne, och CSS har fått sig en ordentlig uppdatering!

 

UPPGIFT

Jag har skapat en liten uppgift för er att prova. Vi har tre gula kvadrater innuti en svart container, och vi skall enbart med hjälp av flexbox få dessa objekt att:

  • hamna på rad horisontellt
  • hamnat centrerat verikalt
  • ha avstånd både på sidorna samt mellan varandra
  • hamna på flera rader när skärmstorleken minskas

Ett tips är att endast #container skall behandlas av våran kod.

Slutresultatet skall likna detta:

uppgift

Länk till uppgiften:

http://codepen.io/anon/pen/LGzLyK

Svårt att få till det? Oroa er inte, färdiga resultatet finns här om ni kör fast:

http://codepen.io/repstegen/pen/gPGRLr

Jag själv lärde mig flexbox genom detta roliga spel, som jag kan tipsa om:

http://flexboxfroggy.com/

Av: Richard Fröjdendahl, 2016

Referenser:

Blog.karenmenezes.com, (2016). Floats, Inline Block or Display Table? Or Flexbox?. [online] Available at: http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/ [Accessed 15 Jan. 2016].

Caniuse.com, (2015). Can I use… Support tables for HTML5, CSS3, etc. [online] Available at: http://caniuse.com/#search=flexbox [Accessed 15 Jan. 2016].

CSS-Tricks, (2009). All About Floats | CSS-Tricks. [online] Available at: https://css-tricks.com/all-about-floats/ [Accessed 15 Jan. 2016].

Css-tricks.com, (2016). [online] Available at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [Accessed 15 Jan. 2016].

Microsoft.com, (2016). Internet Explorer End of Support. [online] Available at: https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support [Accessed 15 Jan. 2016].

SitePoint, (2015). Browser Trends February 2015: The US IE8 Rebound. [online] Available at: http://www.sitepoint.com/browser-trends-february-2015-us-ie8-rebound/ [Accessed 15 Jan. 2016].