• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11
12<html>
13<head>
14
15  <title>iron-flex-layout demo</title>
16  <meta charset="utf-8">
17  <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
19  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20
21  <link rel="import" href="../../paper-styles/demo-pages.html">
22  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
23  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
24  <link rel="import" href="../iron-flex-layout.html">
25
26  <style is="custom-style" include="demo-pages-shared-styles">
27    demo-snippet {
28      --demo-snippet-demo: {
29        padding: 0;
30      }
31    }
32    .container {
33      background-color: #ccc;
34      padding: 5px;
35      margin: 0;
36    }
37    .container > div {
38      padding: 15px;
39      margin: 5px;
40      background-color: white;
41      min-height: 20px;
42    }
43
44    .vertical-section-container {
45      max-width: 700px
46    }
47  </style>
48
49</head>
50<body unresolved class="fullbleed">
51  <div class="vertical-section-container centered">
52    <h4>Horizontal and vertical layout</h4>
53    <demo-snippet>
54      <template>
55        <style is="custom-style">
56          .flex {
57            @apply(--layout-horizontal);
58          }
59        </style>
60        <div class="container flex">
61          <div>one</div>
62          <div>two</div>
63          <div>three</div>
64        </div>
65      </template>
66    </demo-snippet>
67
68    <h4>Flexible children</h4>
69    <demo-snippet>
70      <template>
71        <style is="custom-style">
72          .flex-horizontal {
73            @apply(--layout-horizontal);
74          }
75          .flexchild {
76            @apply(--layout-flex);
77          }
78        </style>
79
80        <div class="container flex-horizontal">
81          <div>one</div>
82          <div class="flexchild">two (flex)</div>
83          <div>three</div>
84        </div>
85      </template>
86    </demo-snippet>
87
88    <h4>Flexible children in vertical layouts</h4>
89    <demo-snippet>
90      <template>
91        <style is="custom-style">
92          .flex-vertical {
93            @apply(--layout-vertical);
94            height: 220px;
95          }
96          .flexchild-vertical {
97            @apply(--layout-flex);
98          }
99        </style>
100
101        <div class="container flex-vertical">
102          <div>one</div>
103          <div class="flexchild-vertical">two (flex)</div>
104          <div>three</div>
105        </div>
106      </template>
107    </demo-snippet>
108
109    <h4>Flex ratios</h4>
110    <demo-snippet>
111      <template>
112        <style is="custom-style">
113          .flex-horizontal-with-ratios {
114            @apply(--layout-horizontal);
115          }
116          .flexchild {
117            @apply(--layout-flex);
118          }
119          .flex2child {
120            @apply(--layout-flex-2);
121          }
122          .flex3child {
123            @apply(--layout-flex-3);
124          }
125        </style>
126
127        <div class="container flex-horizontal-with-ratios">
128          <div class="flex3child">one</div>
129          <div class="flexchild">two</div>
130          <div class="flex2child">three</div>
131        </div>
132      </template>
133    </demo-snippet>
134
135    <h4>Cross-axis stretch alignment (default)</h4>
136    <demo-snippet>
137      <template>
138        <style is="custom-style">
139          .flex-stretch-align {
140            @apply(--layout-horizontal);
141            height: 120px;
142          }
143        </style>
144
145        <div class="container flex-stretch-align">
146          <div>stretch</div>
147        </div>
148      </template>
149    </demo-snippet>
150
151    <h4>Cross-axis center alignment</h4>
152    <demo-snippet>
153      <template>
154        <style is="custom-style">
155          .flex-center-align {
156            @apply(--layout-horizontal);
157            @apply(--layout-center);
158            height: 120px;
159          }
160        </style>
161
162        <div class="container flex-center-align">
163          <div>center</div>
164        </div>
165      </template>
166    </demo-snippet>
167
168    <h4>Cross-axis start alignment</h4>
169    <demo-snippet>
170      <template>
171        <style is="custom-style">
172          .flex-start-align {
173            @apply(--layout-horizontal);
174            @apply(--layout-start);
175            height: 120px;
176          }
177        </style>
178
179        <div class="container flex-start-align">
180          <div>start</div>
181        </div>
182      </template>
183    </demo-snippet>
184
185    <h4>Cross-axis end alignment</h4>
186    <demo-snippet>
187      <template>
188        <style is="custom-style">
189          .flex-end-align {
190            @apply(--layout-horizontal);
191            @apply(--layout-end);
192            height: 120px;
193          }
194        </style>
195
196        <div class="container flex-end-align">
197          <div>end</div>
198        </div>
199      </template>
200    </demo-snippet>
201
202    <h4>Justification, start justified</h4>
203    <demo-snippet>
204      <template>
205        <style is="custom-style">
206          .flex-start-justified {
207            @apply(--layout-horizontal);
208            @apply(--layout-start-justified);
209          }
210        </style>
211
212        <div class="container flex-start-justified">
213          <div>start-justified</div>
214        </div>
215      </template>
216    </demo-snippet>
217
218    <h4>Justification, center justified</h4>
219    <demo-snippet>
220      <template>
221        <style is="custom-style">
222          .flex-center-justified {
223            @apply(--layout-horizontal);
224            @apply(--layout-center-justified);
225          }
226        </style>
227
228        <div class="container flex-center-justified">
229          <div>center-justified</div>
230        </div>
231      </template>
232    </demo-snippet>
233
234    <h4>Justification, end justified</h4>
235    <demo-snippet>
236      <template>
237        <style is="custom-style">
238          .flex-end-justified {
239            @apply(--layout-horizontal);
240            @apply(--layout-end-justified);
241          }
242        </style>
243
244        <div class="container flex-end-justified">
245          <div>end-justified</div>
246        </div>
247      </template>
248    </demo-snippet>
249
250    <h4>Justification, equal space between elements</h4>
251    <demo-snippet>
252      <template>
253        <style is="custom-style">
254          .flex-equal-justified {
255            @apply(--layout-horizontal);
256            @apply(--layout-justified);
257          }
258        </style>
259
260        <div class="container flex-equal-justified">
261          <div>justified</div>
262          <div>justified</div>
263          <div>justified</div>
264        </div>
265      </template>
266    </demo-snippet>
267
268    <h4>Justification, equal space around each element</h4>
269    <demo-snippet>
270      <template>
271        <style is="custom-style">
272          .flex-equal-around-justified {
273            @apply(--layout-horizontal);
274            @apply(--layout-around-justified);
275          }
276        </style>
277
278        <div class="container flex-equal-around-justified">
279          <div>around-justified</div>
280          <div>around-justified</div>
281        </div>
282      </template>
283    </demo-snippet>
284
285    <h4>Self alignment</h4>
286    <demo-snippet>
287      <template>
288        <style is="custom-style">
289          .flex-self-align {
290            @apply(--layout-horizontal);
291            @apply(--layout-justified);
292            height: 120px;
293          }
294          .flex-self-align div {
295            @apply(--layout-flex);
296          }
297          .child1 {
298            @apply(--layout-self-start);
299          }
300          .child2 {
301            @apply(--layout-self-center);
302          }
303          .child3 {
304            @apply(--layout-self-end);
305          }
306          .child4 {
307            @apply(--layout-self-stretch);
308          }
309        </style>
310
311        <div class="container flex-self-align">
312          <div class="child1">one</div>
313          <div class="child2">two</div>
314          <div class="child3">three</div>
315          <div class="child4">four</div>
316        </div>
317      </template>
318    </demo-snippet>
319
320    <h4>Wrapping</h4>
321    <demo-snippet>
322      <template>
323        <style is="custom-style">
324          .flex-wrap {
325            @apply(--layout-horizontal);
326            @apply(--layout-wrap);
327            width: 200px;
328          }
329        </style>
330
331        <div class="container flex-wrap">
332          <div>one</div>
333          <div>two</div>
334          <div>three</div>
335          <div>four</div>
336        </div>
337      </template>
338    </demo-snippet>
339
340    <h4>Reversed layouts</h4>
341    <demo-snippet>
342      <template>
343        <style is="custom-style">
344          .flex-reversed {
345            @apply(--layout-horizontal-reverse);
346          }
347        </style>
348
349        <div class="container flex-reversed">
350          <div>one</div>
351          <div>two</div>
352          <div>three</div>
353          <div>four</div>
354        </div>
355      </template>
356    </demo-snippet>
357
358    <h4>General purpose rules</h4>
359    <demo-snippet>
360      <template>
361        <style is="custom-style">
362          .general {
363            width: 100%;
364          }
365          .general > div {
366            background-color: #ccc;
367            padding: 4px;
368            margin: 12px;
369          }
370          .block {
371            @apply(--layout-block);
372          }
373          .invisible {
374            @apply(--layout-invisible);
375          }
376          .relative {
377            @apply(--layout-relative);
378          }
379          .fit {
380            @apply(--layout-fit);
381          }
382        </style>
383
384        <div class="general">
385          <div>Before <span>[A Span]</span> After</div>
386          <div>Before <span class="block">[A Block Span]</span> After</div>
387          <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
388          <div class="relative" style="height: 100px;">
389            <div class="fit" style="background-color: #000;color: white">Fit</div>
390          </div>
391        </div>
392      </template>
393    </demo-snippet>
394  </div>
395</body>
396</html>
397