Flexbox - kombinera

Exempel

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

.flexLåda {
   display: flex;
   flex-direction: row;
}

.flexElement {
   border: 1px solid black;
   padding: 4px;
   width: 10em;
}

Ovanstående skulle lägga ut ett antal .flexElement-element på en rad.

För att börja förstå vitsen med flexboxar, ska vi ta ett till exempel, där vi kombinerar flexboxar. 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.

Mer flexbox