Flexbox - kombinera: Skillnad mellan sidversioner

Versionen från 24 augusti 2015 kl. 13.43

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

@@ Rad 1: / Rad 1: @@
-== Exempel ==
+== 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:
-<syntaxhighlight lang="css">
+<codepen pen="qdeqoB" height="200" tab="css">
-.flexLåda {
+</codepen>
-   display: flex;
-   flex-direction: row;
+Om vi vill placera ett antal box-element i en kolumn kan vi t.ex. göra följande:
-}
+<codepen pen="oXKYdj" height="200" tab="css">
+</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.
-.flexElement {
+=== Två kolumner ===
-   border: 1px solid black;
+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.
-   padding: 4px;
-   width: 10em;
-}
-</syntaxhighlight>
-Ovanstående skulle lägga ut ett antal <code>.flexElement</code>-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!
+Klicka på de olika flikarna, så du får se både kod och resultat!
 <codepen pen="xGoGxo" height="300" tab="result">
 </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]]