CSS-HTML/flexbox1.html at main · giovaner10/CSS-HTML · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Flexbox #01</title>
    <link rel="stylesheet" href="css/tag.css">
    <style>
        /* ... */
        div{
            border: solid 5px dodgerblue;
            font-size: 20px;
            margin: 5px;

        }
        .big{
            font-size: 1.5em;
        }

        .flex-container{
            display: flex;
            flex-direction: column;
            flex-direction: column-reverse;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="flex-container tag nolabel">
        <div class="tag nolabel">1</div>
        <div class="tag nolabel">2</div>
        <div class="tag nolabel big">3</div>
        <div class="tag nolabel">4</div>
        <div class="tag nolabel">5</div>
        <div class="tag nolabel">6</div>
        <div class="tag nolabel">7</div>
        <div class="tag nolabel">8</div>
        <div class="tag nolabel">9</div>
        <div class="tag nolabel">10</div>
    </div>
    <script src="js/tag.js"></script>
</body>

</html>