Flexbox - kombinera

Grunden

Vi repeterar 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 till 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.

Klicka på de olika flikarna, så du får se både kod och resultat!

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

Genom att på detta vis kombinera olika flexboxar, kan vi skapa mycket av den layout som finns på den moderna webben.

Nästa aktivitet

Mer flexbox