Flexbox - exempel: Skillnad mellan sidversioner

Versionen från 13 januari 2015 kl. 21.32

Nu ska vi titta på hur man kan använda sig av flexbox för att skapa vissa typer av layout.

Centrering

Att centrera saker har i många fall varit problematiskt i CSS. Med flexbox är det mycket lätt att centrera saker. Låt säga att vi vill centrera en text i en box. Vi vill centrera både horisontellt och vertikalt. Vår HTML ser ut så här:

<!DOCTYPE html>
<html>
  <head>
    <title>Centrering</title>
  </head>
  <body>
    <div>
      <p>Centrerad</p>
    </div>
  </body>
</html>

Vi behöver först slå igång flexbox för div-elementet, vilket man gör med display: flex;. Sen måste vi sätta såväl align-items och justify-content till center. Vår CSS blir att se ut som följer:

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Här kan du se hur exemplet blir att se ut.

@@ Rad 2: / Rad 2: @@
 == Centrering ==
-Att centrera saker har i många fall varit problematiskt i [[CSS]].
+Att centrera saker har i många fall varit problematiskt i [[CSS]]. Med flexbox är det mycket lätt att centrera saker. Låt säga att vi vill centrera en text i en box. Vi vill centrera både horisontellt och vertikalt. Vår HTML ser ut så här:
-WORK IN PROGRESS :-)
+<syntaxhighlight lang="html5">
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Centrering</title>
+  </head>
+  <body>
+    <div>
+      <p>Centrerad</p>
+    </div>
+  </body>
+</html>
+</syntaxhighlight>
+Vi behöver först slå igång flexbox för <code>div</code>-elementet, vilket man gör med <code>display: flex;</code>. Sen måste vi sätta såväl <code>align-items</code> och <code>justify-content</code> till <code>center</code>. Vår CSS blir att se ut som följer:
+<syntaxhighlight lang="css">
+div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</syntaxhighlight>
+[http://exempel.webbling.se/ Här] kan du se hur exemplet blir att se ut.