Versionen från 3 januari 2015 kl. 10.13

Det nya, moderna sättet att skapa layout är att använda sig av flexbox. Många äldre webbläsare klarar inte av flexbox, vilket kan vara problematiskt. Ett annat problem är att det fanns en flexbox-standard som inte är kompatibel med nuvarande standard. Flexbox löser dock så många problem och förenklar så mycket att det är väl värt att använda sig av denna standard så mycket som möjligt, speciellt på nya sidor som inte riktar sig mot de som använder uråldriga webbläsare (ja, det går lite grann emot att man ska vara så inkluderande som möjligt...)

Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som ska ha samma höjd, centrering av element (såväl horisontellt som vertikalt) och det ger oss också layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva mycket extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in så mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.

Så nog med brasklappar, låt oss börja använda flexbox!

Flexbox

Som man hör på namnet är flexbox till för att på ett flexibelt sätt hantera boxar och därmed layout. Med hjälp av flexbox kan man låta webbläsaren sköta mycket av placeringen av element och när man kör på olika enheter eller när man ändrar storlek på webbläsarfönstret kommer flexbox att fixa om layouten automatiskt. Flexbox fungerar speciellt bra på enheter som har liten skärm.

Terminologi

Allt som ska hanteras av flexbox, placeras i en flex-behållare. Detta kommer att vara föräldraelementet som alla flex-avkomlingar placeras i.

Flex-element är de barn/avkomlingar som placeras i flex-behållaren. Om du lägger "ren" text inuti en flex-behållare kommer denna att automatiskt placeras i ett "osynligt" flex-element. Du behöver med andra ord inte skapa alla flex-element själv, en del skapas helt automatiskt.

Flex-axel är den axel längs med flex-elementen placeras. Det finns även en korsaxel som är förskjuten 90 grader mot flex-axeln.

Demokod

För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title>Flexbox-demo</title>
  </head>
  <style>
    .flexElement {
    	border: 1px solid black;
    	margin: 4px;
    	width: 10em;
    }
  </style>
  <body>
    <h1>Flexbox-demo</h1>
    <div class="flexLåda">
      <div class="flexElement">
      	<p>Ett</p>
      </div>
      <div class="flexElement">
      	<p>Två</p>
      </div>
      <div class="flexElement">
      	<p>Tre</p>
      </div>
    </div>
  </body>
</html>

Klicka här för att se hur exemplet ser ut. Som du säkert förstått så blir det bara tre lådor som ligger på varsin rad efter varandra.

Att skapa en flexbox

För att skapa en flexbox sätter vi dess display-egenskap till antingen flex eller inline-flex, t.ex. så här:

.flexLåda {
  display: flex;
}

Detta sätter flexLåda-klassen till en flex-behållare och anger samtidigt att alla underelement inuti flexLåda ska vara flex-element.

Om vi lägger till den raden till vår exempel kod blir det att se ut så här. Lägg märke till att lådorna nu samlas på samma rad. Detta är alltså defaultbeteendet för flexboxar.

Att ange flexriktning

Nästa sak som vi måste ange är i vilken riktning flexinnehållet ska placeras ut. Detta görs med CSS-egenskapen flex-direction. Generellt kan man säga att man antingen placeras saker i rader eller i kolumner. flex-direction kan sättas till följande värden:

`row`

Detta är default-värdet. Placerar flexelementen på rad Detta kan innebära att flexelementen placers i rad efter varandra. Antinge ifrån vänster till höger, eller ifrån höger till vänster. Vilket som blir att gälla beror på om ltr eller rtl som gäller för elementet.

`row-reverse`

Fungerar såsom ovanstående row, men elementen placeras ut i omvänd ordning.

`column`

Med detta värde, så placeras flexelement i en kolumn. Varje nytt element placeras under föregående element.

`column-reverse`

Samma som ovanstående, fast elementen växer ifrån botten och placeras ovanför varje föregående element.

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 {
  width: 200px;
  height: 200px;
}

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

Nästa aktivitet: Avancerad flexbox

@@ Rad 57: / Rad 57: @@
 Detta sätter <code>flexLåda</code>-klassen till en flex-behållare och anger samtidigt att alla underelement inuti <code>flexLåda</code> ska vara flex-element.
-Om vi lägger till den raden till vår exempel kod blir det att se ut så [http://exempel.webbling.se/ här]. Lägg märke till att lådorna nu samlas på samma rad. Detta är alltså defaultbeteendet för flexboxar.
+Om vi lägger till den raden till vår exempel kod blir det att se ut så [http://exempel.webbling.se/flexbox2.html här]. Lägg märke till att lådorna nu samlas på samma rad. Detta är alltså defaultbeteendet för flexboxar.
 == Att ange flexriktning ==

Flexbox - grunder: Skillnad mellan sidversioner