web/html_css/basic_templates/layout/flexbox1.html at master · Math-O5/web · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Flexbox #01</title>
    <link rel="stylesheet" href="css/tag.css">
    <style>
       .flex-containe {
           display: flex;
           flex-direction: column;
           flex-direction: column-reverse;
           flex-direction: row-reverse;
           flex-direction: row;
           width: 50%;
           flex-wrap:wrap; /* quebra se tiver overflow*/
           flex-flow: row wrap;

           justify-content: flex-start; /* justificar no inicio */
           justify-content: flex-end;
           justify-content: center;
           justify-content: space-around;
           justify-content: row-reverse;
           justify-content: space-between;

            /* Cross Axis (y) */
            height: 400px;
            align-items: stretch;
            align-items: baseline;
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;

            /* mais de uma linha*/
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: space-around;
       }
    </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>