Flexbox - exempel
Från Webbling
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.
Ville vi bara justera i en ledd, kunde vi utelämnat motsvarande centrerings-CSS-egenskap.