codeup-web-exercises/flexbox-examples.html at main · lexibor/codeup-web-exercises · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox Basics Examples</title>
<!--    <style>-->
<!--        * {-->
<!--            box-sizing: border-box;-->
<!--        }-->
<!--        body {-->
<!--            margin: 0;-->
<!--            font-family: Helvetica;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--        .flex-container {-->
<!--            display: flex;-->
<!--            flex-direction: row;-->
<!--            justify-content: flex-start;-->
<!--            align-items: center;-->
<!--            width: 100%;-->
<!--            border: 3px solid goldenrod;-->
<!--            height: 20em;-->
<!--        }-->
<!--        .flex-item {-->
<!--            background: #BFD45D;-->
<!--            border: 2px solid #F9EFD6;-->
<!--            padding: 1em;-->
<!--            margin: auto;-->
<!--        }-->

<!--        .item-1-->
<!--        {-->
<!--            order: 0;-->
<!--        }-->
<!--        .item-2-->
<!--        {-->
<!--            order: -1;-->
<!--        }-->
<!--        .item-3-->
<!--        {-->
<!--            order: -2;-->
<!--        }-->

<!--    </style>-->


<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
    }
    nav {
        background: #333333;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }
    nav a {
        text-decoration: none;
        color: white;
        font-family: Verdana;
        padding: 1em;
        display: inline-block;
    }
    nav a:hover {
        background: black;
    }
    nav li
    {
        margin: 0 1em;
    }

    nav li:nth-child(4)
    {
        margin-left: auto;
    }
</style>

</head>
<!--<body>-->

<!--<div class="flex-container">-->
<!--    <div class="flex-item item-1">Item 1</div>-->
<!--    <div class="flex-item item-2">Item 2</div>-->
<!--    <div class="flex-item item-3">Item 3</div>-->
<!--</div>-->

<!--</body>-->
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>
</body>
</html>