OLD | NEW |
1 [](https://travis-ci.org/PolymerElements/iron-flex-layout) | 1 [](https://travis-ci.org/PolymerElements/iron-flex-layout) |
2 [](https://beta.webcomponents.org/element/PolymerElements/ir
on-flex-layout) | 2 [](https://beta.webcomponents.org/element/PolymerElements/ir
on-flex-layout) |
3 | 3 |
4 ##<iron-flex-layout> | 4 ## <iron-flex-layout> |
5 | 5 |
6 The `<iron-flex-layout>` component provides simple ways to use | 6 The `<iron-flex-layout>` component provides simple ways to use |
7 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
/Flexible_boxes), | 7 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
/Flexible_boxes), |
8 also known as flexbox. This component provides two different ways to use flexbox
: | 8 also known as flexbox. This component provides two different ways to use flexbox
: |
9 | 9 |
10 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/iron-flex-layout-classes.html). | 10 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/iron-flex-layout-classes.html). |
11 The layout class stylesheet provides a simple set of class-based flexbox rules,
that | 11 The layout class stylesheet provides a simple set of class-based flexbox rules,
that |
12 let you specify layout properties directly in markup. You must include this file | 12 let you specify layout properties directly in markup. You must include this file |
13 in every element that needs to use them. | 13 in every element that needs to use them. |
14 | 14 |
15 Sample use: | 15 Sample use: |
16 | 16 |
17 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> | 17 <!-- |
| 18 ``` |
| 19 <custom-element-demo> |
| 20 <template> |
| 21 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 22 <link rel="import" href="iron-flex-layout-classes.html"> |
| 23 <dom-module id="demo-element"> |
| 24 <template> |
| 25 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 26 <style> |
| 27 .container, .layout { |
| 28 background-color: #ccc; |
| 29 padding: 4px; |
| 30 } |
18 | 31 |
19 <style is="custom-style" include="iron-flex iron-flex-alignment"></style> | 32 .container div, .layout div { |
20 | 33 background-color: white; |
21 <div class="layout horizontal layout-start"> | 34 padding: 12px; |
22 <div>cross axis start alignment</div> | 35 margin: 4px; |
23 </div> | 36 } |
| 37 </style> |
| 38 <next-code-block></next-code-block> |
| 39 </template> |
| 40 <script>Polymer({is: "demo-element"});</script> |
| 41 </dom-module> |
| 42 <demo-element></demo-element> |
| 43 </template> |
| 44 </custom-element-demo> |
| 45 ``` |
| 46 --> |
| 47 ```html |
| 48 <div class="layout horizontal layout-start" style="height: 154px"> |
| 49 <div>cross axis start alignment</div> |
| 50 </div> |
| 51 ``` |
24 | 52 |
25 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). | 53 1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). |
26 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
rule using the `@apply` function. | 54 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
rule using the `@apply` function. |
27 | 55 |
28 | 56 |
29 | 57 |
30 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme
nts/iron-flex-layout/tree/master/classes) | 58 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme
nts/iron-flex-layout/tree/master/classes) |
31 are deprecated, and should not be used. To continue using layout properties | 59 are deprecated, and should not be used. To continue using layout properties |
32 directly in markup, please switch to using the new `dom-module`-based | 60 directly in markup, please switch to using the new `dom-module`-based |
33 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master
/iron-flex-layout-classes.html). | 61 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master
/iron-flex-layout-classes.html). |
34 Please note that the new version does not use `/deep/`, and therefore requires y
ou | 62 Please note that the new version does not use `/deep/`, and therefore requires y
ou |
35 to import the `dom-modules` in every element that needs to use them. | 63 to import the `dom-modules` in every element that needs to use them. |
36 | 64 |
37 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
<iron-flex-layout>` is available. | 65 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
<iron-flex-layout>` is available. |
38 | 66 |
39 | 67 |
OLD | NEW |