Flexbox - Grundstruktur
Se sidens program responsivt:
Sidelayoutet nedenfor er vel tæt på at være standard grundstruktur for en prototype på en HTML-side:
Sidens kode kan ses her:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexempel - grundstruktur</title>
<style>
* {margin: 0px; padding: 0px;}
body {margin: 0px;}
body > div#flexbox {
display: flex;
flex-flow: row wrap;
max-width: 1200px;
margin: auto;
}
body > div#flexbox > div#jumbo,header, nav, div#aside02, main, aside, footer {
background: #ccc;
border-radius: 7px;
margin: .2%;
padding: 1%;
}
body > div#flexbox > div#jumbo { order: 1; height: 100px; flex: 0 1 100%;}
body > div#flexbox > header { order: 2; height: 40px; flex: 0 1 100%;}
body > div#flexbox > nav { order: 3; height: 40px; flex: 0 1 100%;}
body > div#flexbox > div#aside02 { order: 4; min-width: 150px; flex: 0 1 16.7%;}
body > div#flexbox > main { order: 5; min-width: 260px; min-height: 400px; flex: 1 1 59.4%;}
body > div#flexbox > aside { order: 6; min-width: 150px; flex: 0 1 16.7%;}
body > div#flexbox > footer { order: 7; height: 100px; flex: 0 1 100%;}
</style>
</head>
<body>
<div id="flexbox"> <!-- flex box-->
<div id="jumbo"><h4>Jumbo</h4></div>
<header><h4>Header</h4></header> <!-- flex items -->
<nav><h4>Navigation</h4></nav>
<div id="aside02"><h4>Aside02</h4></div>
<main><h2>Brødtekst</h2></main>
<aside><h4>Aside</h4></aside>
<footer><h4>Footer</h4></footer>
</div>
<style>
#foot {display: none;}
</style>
<div id="foot"></div>
</body>
</html>
|
Koden kan kopieres og vises med egen browser.
2. Faste / variable bredder
Sidekolonnerne er ofte så pladsmæssigt pressede, at det kan give mening at lade dem være faste.
Ved at udskifte de 3 linier i koden 'Responsive sidebars' med de 3 linier 'Faste sidebars' nedenfor ændres programmet så sidebarerne har fast bredde:
/* Faste sidebars */
body > div#flexbox > nav { order: 2; flex: 0 1 200px;}
body > div#flexbox > main { order: 3; min-height: 400px; min-width: 300px; flex: 1;}
body > div#flexbox > div#sidebar01 { order: 4; flex: 0 1 200px;}
|
Skærmbilledet er nu 'fuldkantet' og ligner umiddelbart det oprindelige.
Test for responsivitet: Alle 5 felter er nu responsive.
3. Fuld skærm
Brug det oprindelige program.
Slet eller udkommenter 'margin' og 'padding'.
Bredden på 'Brødtekst'-feltet kan nu udvides til 66.4%
Skærmbilledet er nu 'uden støj' og fuldkantet
Test for responsivitet.
|