Flexbox - exempel: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| Rad 29: | Rad 29: | ||
[http://exempel.webbling.se/flexbox17.html Här] kan du se hur exemplet blir att se ut. | [http://exempel.webbling.se/flexbox17.html 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. | |||
Versionen från 13 januari 2015 kl. 21.34
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.