Flexbox - exempel: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| Rad 34: | Rad 34: | ||
== Layout i kolumner == | == Layout i kolumner == | ||
Som du kanske sett så bygger de flesta webbsajter på en layout där man har flera kolumner. Historiskt sett har det varit svårt att få till en bra kolumnlayout med HTML/CSS. Främst är det svårt att få till kolumner som har samma höjd. Med flexbox blir det dock lätt att få till en dylik layout. Vi provar att göra en layout med tre kolumner. På höger och vänster sida | Som du kanske sett så bygger de flesta webbsajter på en layout där man har flera kolumner. Historiskt sett har det varit svårt att få till en bra kolumnlayout med HTML/CSS. Främst är det svårt att få till kolumner som har samma höjd. Med flexbox blir det dock lätt att få till en dylik layout. Vi provar att göra en layout med tre kolumner. På höger och vänster sida sätter vi smala kolumner och i mitten har vi en bredare layout. För de smala kolumnerna använder vi oss av <code>[[aside]]</code>, som är HTML-kommandot för saker som marginellt hör till innehållet och som inte är central och superviktigt (ofta har man saker som reklam och navigation i dessa kolumner). Mittenkolumnen sätter vi med <code>[[main]]</code> eftersom det ska vara huvudinnehållet. | ||
Så här skulle koden kunna att bli och se ut, vi börjar med HTML: | Så här skulle koden kunna att bli och se ut, vi börjar med HTML: | ||
<codepen pen="eNwvdG" height="300" tab="html"> | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
| Rad 58: | Rad 58: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</codepen> | |||
Sen behöver vi lite CSS ocskå: | Sen behöver vi lite CSS ocskå: | ||
<codepen pen="eNwvdG" height="300" tab="css"> | |||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
body { | body { | ||
| Rad 77: | Rad 78: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
</codepen> | |||
[http://exempel.webbling.se/flexbox18.html Här] kan du se hur en något expanderad version av exemplet blir att se ut. | [http://exempel.webbling.se/flexbox18.html Här] kan du se hur en något expanderad version av exemplet blir att se ut. | ||
<codepen pen="eNwvdG" height="300" tab="result"> | |||
</codepen> | |||
== Kolumner samt sid-huvud och -fot == | == Kolumner samt sid-huvud och -fot == | ||
Versionen från 20 augusti 2015 kl. 12.00
Nu ska vi titta på hur man kan använda sig av flexbox för att skapa olika 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:
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:
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.
Layout i kolumner
Som du kanske sett så bygger de flesta webbsajter på en layout där man har flera kolumner. Historiskt sett har det varit svårt att få till en bra kolumnlayout med HTML/CSS. Främst är det svårt att få till kolumner som har samma höjd. Med flexbox blir det dock lätt att få till en dylik layout. Vi provar att göra en layout med tre kolumner. På höger och vänster sida sätter vi smala kolumner och i mitten har vi en bredare layout. För de smala kolumnerna använder vi oss av aside, som är HTML-kommandot för saker som marginellt hör till innehållet och som inte är central och superviktigt (ofta har man saker som reklam och navigation i dessa kolumner). Mittenkolumnen sätter vi med main eftersom det ska vara huvudinnehållet.
Så här skulle koden kunna att bli och se ut, vi börjar med HTML:
Sen behöver vi lite CSS ocskå:
Här kan du se hur en något expanderad version av exemplet blir att se ut.
Kolumner samt sid-huvud och -fot
Förutom en kolumnlayout har de flesta webbsajter även ett sidhuvud och en sidfot. Det finns lite olika sätt på vilket vi kan lösa detta. Ett enkelt sätt är att kombinera två flexboxar, en kolumn- och en rad-box. Så här kan HTML-koden se ut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Kolumner</title>
</head>
<body>
<header>
<h1>Sidhuvud</h1>
</header>
<div>
<aside class="left">
<p>Vänster</p>
</aside>
<main>
<p>Mitt</p>
</main>
<aside class="right">
<p>Höger</p>
</aside>
</div>
<footer>
<p>Sidfot</p>
</footer>
</body>
</html>
CSS:en för att få till det hela blir att se ut så här:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
header {
flex-grow: 1;
}
div {
flex-grow: 20;
display: flex;
align-items: stretch;
}
div {
flex-grow: 20;
display: flex;
align-items: stretch;
}
aside {
flex-grow: 1;
}
main {
flex-grow: 4;
}
footer {
flex-grow: 1;
}
Här kan du se hur en något förbättrad version av exemplet blir att se ut.