CSS-Flex/index.html at main · thunesti/CSS-Flex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>115A</title>
        <style>

            body {
                padding: 0;
                margin: 0;
            }

            .page{
                display: flex;
                flex-flow: row wrap;
                height: 100vh;
            }

            /* Alle div'er 100% bredde via flex basis shorthand*/

            .page > * {
                flex: 1 100%;
            }

            /* Rekkefølge mobil-vennlig
             * Dette eksempel:
             * 1. header
             * 2. menu
             * 3. content
             * 4. footer
             */

             /* Medium skjerm */
             @media all and (min-width: 600px) {
            .menu { flex: 1; }
            }

            /* Stor skjerm */
            @media all and (min-width: 800px) {
            /* Her har jeg fått hjelp av CSS-tricks.com. Har forsøkt å forstå, men ikke alt jeg skjønner her. Må studere flex nøyere */
            .content { flex: 3; }
            .menu { order: 1; }
            .content    { order: 2; }
            .footer { order: 3; }
            }

        </style>
    </head>
    <body>
        <div class="page">
            <div class="header" style="background-color: lightgray">header</div>
            <div class="menu" style="background-color: lightblue">menu</div>
            <div class="content" style="background-color: lightgreen">main content</div>
            <div class="footer" style="background-color: lightpink">footer</div>
        </div>
    </body>
</html>