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:

Grundstruktur01

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"> 
    <div id="jumbo"><h4>Jumbo</h4></div>
    <header><h4>Header</h4></header> 
    <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.