nevim/flexbox.html at master · L1py/nevim · 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
<!DOCTYPE html>
<html lang="cz">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexboxy 1</title>
</head>

<style>
    body{
        display: flex;
        flex-direction: wrap;
        flex-wrap: wrap-reverse;
    }
    .a{

         background-color: aqua;
         display:flex;
         flex-direction: row-reverse;
         width:50%;
    }
    .b{
        background-color: hotpink;
        width:50%;


    }
    .c{
        background-color: chartreuse;
        width:50%;
    }


</style>

<body>
    <div class="a">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor temporibus repellendus sint dolores nemo nobis
        reprehenderit recusandae voluptates rem inventore nostrum ratione amet doloremque praesentium fugiat enim magni,
        tenetur aut! Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><p> Voluptatum odio sapiente necessitatibus
        sed nihil distinctio asperiores atque, quas, porro rerum officia corrupti molestias optio saepe qui. Ea nesciunt
        sapiente hic! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolorum beatae consequuntur eos quo,</p>
    </div>
        <div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor temporibus repellendus sint dolores nemo nobis
            reprehenderit recusandae voluptates rem inventore nostrum ratione amet doloremque praesentium fugiat enim magni,
            tenetur aut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odio sapiente necessitatibus
            sed nihil distinctio asperiores atque, quas, porro rerum officia corrupti molestias optio saepe qui. Ea nesciunt
            sapiente hic! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolorum beatae consequuntur eos quo,


        </div>
            <div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor temporibus repellendus sint dolores nemo nobis
                reprehenderit recusandae voluptates rem inventore nostrum ratione amet doloremque praesentium fugiat enim magni,
                tenetur aut! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odio sapiente necessitatibus
                sed nihil distinctio asperiores atque, quas, porro rerum officia corrupti molestias optio saepe qui. Ea nesciunt
                sapiente hic! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde dolorum beatae consequuntur eos quo,


            </div>
</body>

</html>