UNPKG

6.29 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en-gb" dir="ltr">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Flex - UIkit tests</title>
8 <script src="js/test.js"></script>
9 <style type="text/css">
10
11 .uk-flex > * {
12 padding: 10px;
13 text-align: center;
14 }
15
16 .uk-flex > :nth-child(8n-7) { background: rgba(0,0,0,0.1); }
17 .uk-flex > :nth-child(8n-6) { background: rgba(0,0,0,0.15); }
18 .uk-flex > :nth-child(8n-5) { background: rgba(0,0,0,0.2); }
19 .uk-flex > :nth-child(8n-4) { background: rgba(0,0,0,0.25); }
20 .uk-flex > :nth-child(8n-3) { background: rgba(0,0,0,0.3); }
21 .uk-flex > :nth-child(8n-2) { background: rgba(0,0,0,0.35); }
22 .uk-flex > :nth-child(8n-1) { background: rgba(0,0,0,0.40); }
23 .uk-flex > :nth-child(8n) { background: rgba(0,0,0,0.45); }
24
25 .test {
26 height: 300px;
27 background: #f0f0f0;
28 }
29
30 </style>
31 </head>
32
33 <body>
34
35 <div class="uk-container">
36
37 <h1>Flex</h1>
38
39 <h2>Alignment and Justify</h2>
40
41 <h3>Stretch / Left (Default)</h3>
42
43 <div class="uk-flex uk-child-width-1-4">
44 <div>1-4</div>
45 <div>1-4<br>...</div>
46 <div>1-4<br>...<br>...</div>
47 </div>
48
49 <h3>Middle / Center</h3>
50
51 <div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-4">
52 <div>1-4</div>
53 <div>1-4<br>...</div>
54 <div>1-4<br>...<br>...</div>
55 </div>
56
57 <h3>Bottom / Right</h3>
58
59 <div class="uk-flex uk-flex-bottom uk-flex-right uk-child-width-1-4">
60 <div>1-4</div>
61 <div>1-4<br>...</div>
62 <div>1-4<br>...<br>...</div>
63 </div>
64
65 <h3>Top / Space-between</h3>
66
67 <div class="uk-flex uk-flex-top uk-flex-between uk-child-width-1-4">
68 <div>1-4</div>
69 <div>1-4<br>...</div>
70 <div>1-4<br>...<br>...</div>
71 </div>
72
73 <h3>Stretch / Space-around</h3>
74
75 <div class="uk-flex uk-flex-around uk-child-width-1-4">
76 <div>1-4</div>
77 <div>1-4<br>...</div>
78 <div>1-4<br>...<br>...</div>
79 </div>
80
81 <h2>Wrap and Alignment</h2>
82
83 <h3>Stretch</h3>
84
85 <div class="uk-flex uk-flex-wrap test">
86 <div class="uk-width-1-3">1-3</div>
87 <div class="uk-width-1-2">1-2<br>...</div>
88 <div class="uk-width-1-3">1-3<br>...<br>...</div>
89 <div class="uk-width-1-3">1-3</div>
90 <div class="uk-width-1-2">1-2<br>...</div>
91 <div class="uk-width-1-3">1-3<br>...<br>...</div>
92 </div>
93
94 <h3>Top</h3>
95
96 <div class="uk-flex uk-flex-wrap uk-flex-wrap-top test">
97 <div class="uk-width-1-3">1-3</div>
98 <div class="uk-width-1-2">1-2<br>...</div>
99 <div class="uk-width-1-3">1-3<br>...<br>...</div>
100 <div class="uk-width-1-3">1-3</div>
101 <div class="uk-width-1-2">1-2<br>...</div>
102 <div class="uk-width-1-3">1-3<br>...<br>...</div>
103 </div>
104
105 <h3>Middle</h3>
106
107 <div class="uk-flex uk-flex-wrap uk-flex-wrap-middle test">
108 <div class="uk-width-1-3">1-3</div>
109 <div class="uk-width-1-2">1-2<br>...</div>
110 <div class="uk-width-1-3">1-3<br>...<br>...</div>
111 <div class="uk-width-1-3">1-3</div>
112 <div class="uk-width-1-2">1-2<br>...</div>
113 <div class="uk-width-1-3">1-3<br>...<br>...</div>
114 </div>
115
116 <h3>Bottom</h3>
117
118 <div class="uk-flex uk-flex-wrap uk-flex-wrap-bottom test">
119 <div class="uk-width-1-3">1-3</div>
120 <div class="uk-width-1-2">1-2<br>...</div>
121 <div class="uk-width-1-3">1-3<br>...<br>...</div>
122 <div class="uk-width-1-3">1-3</div>
123 <div class="uk-width-1-2">1-2<br>...</div>
124 <div class="uk-width-1-3">1-3<br>...<br>...</div>
125 </div>
126
127 <h3>Space-between</h3>
128
129 <div class="uk-flex uk-flex-wrap uk-flex-wrap-between test">
130 <div class="uk-width-1-3">1-3</div>
131 <div class="uk-width-1-2">1-2<br>...</div>
132 <div class="uk-width-1-3">1-3<br>...<br>...</div>
133 <div class="uk-width-1-3">1-3</div>
134 <div class="uk-width-1-2">1-2<br>...</div>
135 <div class="uk-width-1-3">1-3<br>...<br>...</div>
136 </div>
137
138 <h3>Space-around</h3>
139
140 <div class="uk-flex uk-flex-wrap uk-flex-wrap-around test">
141 <div class="uk-width-1-3">1-3</div>
142 <div class="uk-width-1-2">1-2<br>...</div>
143 <div class="uk-width-1-3">1-3<br>...<br>...</div>
144 <div class="uk-width-1-3">1-3</div>
145 <div class="uk-width-1-2">1-2<br>...</div>
146 <div class="uk-width-1-3">1-3<br>...<br>...</div>
147 </div>
148
149 <h2>Inline Flex</h2>
150
151 <div class="uk-text-center">
152 <div class="uk-flex uk-flex-inline">
153 <div>1-4</div>
154 <div>1-4<br>...</div>
155 <div>1-4<br>...<br>...</div>
156 </div>
157 </div>
158
159 <h2>Order</h2>
160
161 <div class="uk-flex uk-child-width-1-3">
162 <div>1</div>
163 <div>2</div>
164 <div class="uk-flex-first">3</div>
165 </div>
166
167 <div class="uk-flex uk-child-width-1-3">
168 <div class="uk-flex-last">1</div>
169 <div>2</div>
170 <div>3</div>
171 </div>
172
173 <div class="uk-flex uk-child-width-1-3">
174 <div class="uk-flex-last">1</div>
175 <div>2</div>
176 <div class="uk-flex-first">3</div>
177 </div>
178
179 </div>
180
181 </body>
182</html>