Flexbox - kombinera

Från Webbling
Hoppa till: navigering, sök

För att skapa layout med flexbox vill vi ofta kombinera de olika axlarna på olika vis. På så vis kan vi bygga upp vår sidas utseende genom att kombinera kolumner och rader som tillsammans bygger upp layouten.

Grunden

Vi börjar med att repetera grunderna...

Om vi vill placera ett antal box-element på en och samma rad kan vi t.ex. göra följande:

See the Pen qdeqoB by Patrik Grip-Jansson (@PGJ) on CodePen.

Om vi vill placera ett antal box-element i en kolumn kan vi t.ex. göra följande:

See the Pen oXKYdj by Patrik Grip-Jansson (@PGJ) on CodePen.

Kombinera

För att det här ska bli kraftfull och för att börja förstå vitsen med flexboxar, ska vi ta ett par exempel, där vi kombinerar flexboxar på olika vis.

Två kolumner

Genom att först ha en omslutande flexbox som lägger saker på rad och sedan ha ett par underliggande flexboxar där saker ligger i kolumner, kan vi få till en trevlig layout.


See the Pen xGoGxo by Patrik Grip-Jansson (@PGJ) on CodePen.

Detta är en mycket kortare, snyggare/renare och mer robust lösning än om vi skulle gjort motsvarande lösning med float.

Tre kolumner

Skulle vi vilja ha fler kolumner, lägger vi bara till ännu en rad med flexKolumn och vidhängande innehåll. Likaså om vi vill ha fler, eller färre rader, då ändrar vi bara antalet flexElement i respektive flexKolumn. I följande exempel har vi tre kolumner, men den mittersta kolumnen har enbart en rad.

See the Pen Jdgbao by Patrik Grip-Jansson (@PGJ) on CodePen.

Lägg märke till att trots att den mittersta kolumnen har färre element, sätts dess höjd till samma höjd som övriga kolumner. Detta är något som är svårt att åstadkomma med "traditionella" CSS-lösningar. Med flexbox får vi det automatiskt. Vilket är ännu en fördel med att skapa layout med hjälp av flexbox.

Skissa, innan du börjar koda

I början kan det definitivt vara en bra idé att skissa upp den layout man vill ha på papper och utifrån skissen konstruera den flexlayout som behövs. Faktum är att även proffsen jobbar utifrån skisser - man kallar ofta detta för mockups. Detta gäller inte minst om man har stora webbprojekt, där många olika personer är involverade. Då är det inte bara att sätta igång och koda och hoppas att alla väljer att jobba utifrån samma layoutkoncept!

Nästa aktivitet

Genom att på detta vis kombinera olika flexboxar, kan vi skapa mycket av den layout som finns på den moderna webben. Vi behöver dock lite mer kött på benen innan vi kan göra riktig stordåd :-)

Flexbox - sätta storlek