-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
109 lines (94 loc) · 2.5 KB
/
index.html
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
105
106
107
108
109
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox demos</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="modernizr.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h2>CSS Flexible Box aka Flexbox demos</h2>
<p>26/06/13 - Good news! Flexbox is now unprefixed in Firefox (22). This means that you can use Flexbox when browser support is limited to Firefox and Chrome. This will soon land in Blink thus you will be able to use flexbox unprefixed in future Opera, Chrome. It's also a feature of Safari 7 although it's not known whether it will be prefixed or not. Here's some demo's to get started. —<a href="http://twitter.com/wolfr_">Wolfr_</a></p>
<h3>Two columns</h3>
<div class="flex-this">
<div>A</div>
<div>B</div>
</div>
<h3>Three columns</h3>
<div class="flex-this">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3> ∞ columns</h3>
<div class="flex-this">
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>True vertical centering</h3>
<div class="center-this">
<div>A</div>
</div>
<h3>True vertical centering (multiple items)</h3>
<div class="center-this">
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
</div>
<h3>True vertical centering (with margin auto)</h3>
<div class="center-this-alt">
<div>A</div>
</div>
<h3>True vertical centering (multiple items with margin auto)</h3>
<div class="center-this-alt">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>Nav items spaced out</h3>
<div class="spaced-out">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>
<h3>Flex form</h3>
<div class="flex-form">
<input type="text">
<input type="submit">
</div>
<h3>Flex wraps (2 cols)</h3>
<div class="flex-wraps">
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
<div>A</div>
</div>
<h3>Fixed + liquid</h3>
<div class="fixed-liquid">
<div class="fixed">This is fixed</div>
<div class="liquid">This is liquid</div>
</div>
<hr>
<p><a href="http://wolfslittlestore.be">Wolf's Little Store</a>
</body>
</html>