• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12
13<!--
14The `<iron-flex-layout>` component provides simple ways to use
15[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
16also known as flexbox. This component provides two different ways to use flexbox:
17
181. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
19The layout class stylesheet provides a simple set of class-based flexbox rules, that
20let you specify layout properties directly in markup. You must include this file
21in every element that needs to use them.
22
23  Sample use:
24
25      <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
26      <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
27
28      <div class="layout horizontal layout-start">
29        <div>cross axis start alignment</div>
30      </div>
31
322. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
33The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
34
35Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
36are deprecated, and should not be used. To continue using layout properties
37directly in markup, please switch to using the new `dom-module`-based
38[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
39Please note that the new version does not use `/deep/`, and therefore requires you
40to import the `dom-modules` in every element that needs to use them.
41
42A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
43
44@group Iron Elements
45@pseudoElement iron-flex-layout
46@demo demo/index.html
47-->
48
49<style>
50  /* IE 10 support for HTML5 hidden attr */
51  [hidden] {
52    display: none !important;
53  }
54</style>
55
56<style is="custom-style">
57  :root {
58
59    --layout: {
60      display: -ms-flexbox;
61      display: -webkit-flex;
62      display: flex;
63    };
64
65    --layout-inline: {
66      display: -ms-inline-flexbox;
67      display: -webkit-inline-flex;
68      display: inline-flex;
69    };
70
71    --layout-horizontal: {
72      @apply(--layout);
73
74      -ms-flex-direction: row;
75      -webkit-flex-direction: row;
76      flex-direction: row;
77    };
78
79    --layout-horizontal-reverse: {
80      @apply(--layout);
81
82      -ms-flex-direction: row-reverse;
83      -webkit-flex-direction: row-reverse;
84      flex-direction: row-reverse;
85    };
86
87    --layout-vertical: {
88      @apply(--layout);
89
90      -ms-flex-direction: column;
91      -webkit-flex-direction: column;
92      flex-direction: column;
93    };
94
95    --layout-vertical-reverse: {
96      @apply(--layout);
97
98      -ms-flex-direction: column-reverse;
99      -webkit-flex-direction: column-reverse;
100      flex-direction: column-reverse;
101    };
102
103    --layout-wrap: {
104      -ms-flex-wrap: wrap;
105      -webkit-flex-wrap: wrap;
106      flex-wrap: wrap;
107    };
108
109    --layout-wrap-reverse: {
110      -ms-flex-wrap: wrap-reverse;
111      -webkit-flex-wrap: wrap-reverse;
112      flex-wrap: wrap-reverse;
113    };
114
115    --layout-flex-auto: {
116      -ms-flex: 1 1 auto;
117      -webkit-flex: 1 1 auto;
118      flex: 1 1 auto;
119    };
120
121    --layout-flex-none: {
122      -ms-flex: none;
123      -webkit-flex: none;
124      flex: none;
125    };
126
127    --layout-flex: {
128      -ms-flex: 1 1 0.000000001px;
129      -webkit-flex: 1;
130      flex: 1;
131      -webkit-flex-basis: 0.000000001px;
132      flex-basis: 0.000000001px;
133    };
134
135    --layout-flex-2: {
136      -ms-flex: 2;
137      -webkit-flex: 2;
138      flex: 2;
139    };
140
141    --layout-flex-3: {
142      -ms-flex: 3;
143      -webkit-flex: 3;
144      flex: 3;
145    };
146
147    --layout-flex-4: {
148      -ms-flex: 4;
149      -webkit-flex: 4;
150      flex: 4;
151    };
152
153    --layout-flex-5: {
154      -ms-flex: 5;
155      -webkit-flex: 5;
156      flex: 5;
157    };
158
159    --layout-flex-6: {
160      -ms-flex: 6;
161      -webkit-flex: 6;
162      flex: 6;
163    };
164
165    --layout-flex-7: {
166      -ms-flex: 7;
167      -webkit-flex: 7;
168      flex: 7;
169    };
170
171    --layout-flex-8: {
172      -ms-flex: 8;
173      -webkit-flex: 8;
174      flex: 8;
175    };
176
177    --layout-flex-9: {
178      -ms-flex: 9;
179      -webkit-flex: 9;
180      flex: 9;
181    };
182
183    --layout-flex-10: {
184      -ms-flex: 10;
185      -webkit-flex: 10;
186      flex: 10;
187    };
188
189    --layout-flex-11: {
190      -ms-flex: 11;
191      -webkit-flex: 11;
192      flex: 11;
193    };
194
195    --layout-flex-12: {
196      -ms-flex: 12;
197      -webkit-flex: 12;
198      flex: 12;
199    };
200
201    /* alignment in cross axis */
202
203    --layout-start: {
204      -ms-flex-align: start;
205      -webkit-align-items: flex-start;
206      align-items: flex-start;
207    };
208
209    --layout-center: {
210      -ms-flex-align: center;
211      -webkit-align-items: center;
212      align-items: center;
213    };
214
215    --layout-end: {
216      -ms-flex-align: end;
217      -webkit-align-items: flex-end;
218      align-items: flex-end;
219    };
220
221    --layout-baseline: {
222      -ms-flex-align: baseline;
223      -webkit-align-items: baseline;
224      align-items: baseline;
225    };
226
227    /* alignment in main axis */
228
229    --layout-start-justified: {
230      -ms-flex-pack: start;
231      -webkit-justify-content: flex-start;
232      justify-content: flex-start;
233    };
234
235    --layout-center-justified: {
236      -ms-flex-pack: center;
237      -webkit-justify-content: center;
238      justify-content: center;
239    };
240
241    --layout-end-justified: {
242      -ms-flex-pack: end;
243      -webkit-justify-content: flex-end;
244      justify-content: flex-end;
245    };
246
247    --layout-around-justified: {
248      -ms-flex-pack: distribute;
249      -webkit-justify-content: space-around;
250      justify-content: space-around;
251    };
252
253    --layout-justified: {
254      -ms-flex-pack: justify;
255      -webkit-justify-content: space-between;
256      justify-content: space-between;
257    };
258
259    --layout-center-center: {
260      @apply(--layout-center);
261      @apply(--layout-center-justified);
262    };
263
264    /* self alignment */
265
266    --layout-self-start: {
267      -ms-align-self: flex-start;
268      -webkit-align-self: flex-start;
269      align-self: flex-start;
270    };
271
272    --layout-self-center: {
273      -ms-align-self: center;
274      -webkit-align-self: center;
275      align-self: center;
276    };
277
278    --layout-self-end: {
279      -ms-align-self: flex-end;
280      -webkit-align-self: flex-end;
281      align-self: flex-end;
282    };
283
284    --layout-self-stretch: {
285      -ms-align-self: stretch;
286      -webkit-align-self: stretch;
287      align-self: stretch;
288    };
289
290    --layout-self-baseline: {
291      -ms-align-self: baseline;
292      -webkit-align-self: baseline;
293      align-self: baseline;
294    };
295
296    /* multi-line alignment in main axis */
297
298    --layout-start-aligned: {
299      -ms-flex-line-pack: start;  /* IE10 */
300      -ms-align-content: flex-start;
301      -webkit-align-content: flex-start;
302      align-content: flex-start;
303    };
304
305    --layout-end-aligned: {
306      -ms-flex-line-pack: end;  /* IE10 */
307      -ms-align-content: flex-end;
308      -webkit-align-content: flex-end;
309      align-content: flex-end;
310    };
311
312    --layout-center-aligned: {
313      -ms-flex-line-pack: center;  /* IE10 */
314      -ms-align-content: center;
315      -webkit-align-content: center;
316      align-content: center;
317    };
318
319    --layout-between-aligned: {
320      -ms-flex-line-pack: justify;  /* IE10 */
321      -ms-align-content: space-between;
322      -webkit-align-content: space-between;
323      align-content: space-between;
324    };
325
326    --layout-around-aligned: {
327      -ms-flex-line-pack: distribute;  /* IE10 */
328      -ms-align-content: space-around;
329      -webkit-align-content: space-around;
330      align-content: space-around;
331    };
332
333    /*******************************
334              Other Layout
335    *******************************/
336
337    --layout-block: {
338      display: block;
339    };
340
341    --layout-invisible: {
342      visibility: hidden !important;
343    };
344
345    --layout-relative: {
346      position: relative;
347    };
348
349    --layout-fit: {
350      position: absolute;
351      top: 0;
352      right: 0;
353      bottom: 0;
354      left: 0;
355    };
356
357    --layout-scroll: {
358      -webkit-overflow-scrolling: touch;
359      overflow: auto;
360    };
361
362    --layout-fullbleed: {
363      margin: 0;
364      height: 100vh;
365    };
366
367    /* fixed position */
368
369    --layout-fixed-top: {
370      position: fixed;
371      top: 0;
372      left: 0;
373      right: 0;
374    };
375
376    --layout-fixed-right: {
377      position: fixed;
378      top: 0;
379      right: 0;
380      bottom: 0;
381    };
382
383    --layout-fixed-bottom: {
384      position: fixed;
385      right: 0;
386      bottom: 0;
387      left: 0;
388    };
389
390    --layout-fixed-left: {
391      position: fixed;
392      top: 0;
393      bottom: 0;
394      left: 0;
395    };
396
397  }
398
399</style>
400