Página Inicial Explorar Ajuda
Entrar
lu
/
lp
espelho de git://github.com/heyLu/lp
Observar 1
Favorito 0
Fork 0
Código Problemas 0 Commits 201 Versões 1 Wiki
Ver Código Fonte

a responsive grid using flexbox.

it's unfinished, but it's quite nice to see that it's so simple to do.
Lucas Stadler 12 anos atrás
pai
bf2b2cd224
commit
ee429959de
1 arquivos alterados com 73 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 73 0
      css/responsive-grid.html

+ 73 - 0
css/responsive-grid.html
Ver Arquivo 

@ -0,0 +1,73 @@
1 
<!doctype html>
2 
<html>
3 
    <head>
4 
        <title>A responsive grid using css flexbox.</title>
5 
        <meta charset="utf-8" />
6 
        <style type="text/css">
7 
            .grid {
8 
                display: flex;
9 
                flex-flow: row wrap;
10
11 
                /*width: 40em;*/
12 
            }
13
14 
            .grid > div {
15 
                flex: 0 1 auto;
16
17 
                min-width: 5em;
18 
                min-height: 5em;
19
20 
                margin: 0.5em 1em;
21 
            }
22
23 
            .grid > div:hover { opacity: 0.75; }
24
25 
            .grid > .larger {
26 
                flex: 4 1 auto;
27 
            }
28
29 
            .red { background-color: #e02f56; }
30 
            .green { background-color: #1ed66b; }
31 
        </style>
32 
    </head>
33
34 
    <body>
35 
        <h1>A responsive grid using css flexbox</h1>
36
37 
        <p>By setting <code>flex-flow: row wrap;</code> on the grid container
38 
            we display the elements inside it as rows that wrap when they are
39 
            too large for fitting on one line.</p>
40
41 
        <p>Resize your browser window to have some more fun.</p>
42
43 
        <p>Firefox doesn't seem to support the <code>flex-flow</code> property yet,
44 
            so you'd want to use a polyfill.</p>
45
46 
        <div class="grid">
47 
            <div class="red"></div>
48 
            <div class="red"></div>
49 
            <div class="red larger"></div>
50 
            <div class="red"></div>
51 
            <div class="red"></div>
52 
            <div class="green"></div>
53 
            <div class="red"></div>
54 
            <div class="red"></div>
55 
            <div class="red larger"></div>
56 
            <div class="red"></div>
57 
            <div class="red"></div>
58 
            <div class="red"></div>
59 
            <div class="red"></div>
60 
            <div class="red"></div>
61 
            <div class="red larger"></div>
62 
            <div class="red"></div>
63 
            <div class="red"></div>
64 
            <div class="green"></div>
65 
            <div class="red"></div>
66 
            <div class="red"></div>
67 
            <div class="red larger"></div>
68 
            <div class="red"></div>
69 
            <div class="green"></div>
70 
            <div class="red"></div>
71 
        </div>
72 
    </body>
73 
</html>