OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 | 12 |
13 <!-- | 13 <!-- |
14 The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box
layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
also known as flexbox. This component provides two different ways to use flexbo
x: | 14 The `<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), |
| 16 also known as flexbox. This component provides two different ways to use flexbox
: |
15 | 17 |
16 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/classes). The layout class stylesheet provides a simple set of class-based f
lexbox rules. Layout classes let you specify layout properties directly in marku
p. | 18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/iron-flex-layout-classes.html). |
| 19 The layout class stylesheet provides a simple set of class-based flexbox rules,
that |
| 20 let you specify layout properties directly in markup. You must include this file |
| 21 in every element that needs to use them. |
17 | 22 |
18 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins t
hat can be applied inside a CSS rule using the `@apply` function. | 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"> |
| 27 |
| 28 <div class="layout horizontal layout-start"> |
| 29 <div>cross axis start alignment</div> |
| 30 </div> |
| 31 |
| 32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). |
| 33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
rule using the `@apply` function. |
| 34 |
| 35 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme
nts/iron-flex-layout/tree/master/classes) |
| 36 are deprecated, and should not be used. To continue using layout properties |
| 37 directly 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). |
| 39 Please note that the new version does not use `/deep/`, and therefore requires y
ou |
| 40 to import the `dom-modules` in every element that needs to use them. |
19 | 41 |
20 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
<iron-flex-layout>` is available. | 42 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
<iron-flex-layout>` is available. |
21 | 43 |
22 @group Iron Elements | 44 @group Iron Elements |
23 @pseudoElement iron-flex-layout | 45 @pseudoElement iron-flex-layout |
24 @demo demo/index.html | 46 @demo demo/index.html |
25 --> | 47 --> |
26 | 48 |
27 <style> | 49 <style> |
28 /* IE 10 support for HTML5 hidden attr */ | 50 /* IE 10 support for HTML5 hidden attr */ |
(...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
210 justify-content: center; | 232 justify-content: center; |
211 }; | 233 }; |
212 | 234 |
213 --layout-end-justified: { | 235 --layout-end-justified: { |
214 -ms-flex-pack: end; | 236 -ms-flex-pack: end; |
215 -webkit-justify-content: flex-end; | 237 -webkit-justify-content: flex-end; |
216 justify-content: flex-end; | 238 justify-content: flex-end; |
217 }; | 239 }; |
218 | 240 |
219 --layout-around-justified: { | 241 --layout-around-justified: { |
220 -ms-flex-pack: around; | 242 -ms-flex-pack: distribute; |
221 -webkit-justify-content: space-around; | 243 -webkit-justify-content: space-around; |
222 justify-content: space-around; | 244 justify-content: space-around; |
223 }; | 245 }; |
224 | 246 |
225 --layout-justified: { | 247 --layout-justified: { |
226 -ms-flex-pack: justify; | 248 -ms-flex-pack: justify; |
227 -webkit-justify-content: space-between; | 249 -webkit-justify-content: space-between; |
228 justify-content: space-between; | 250 justify-content: space-between; |
229 }; | 251 }; |
230 | 252 |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
319 --layout-fixed-left: { | 341 --layout-fixed-left: { |
320 position: fixed; | 342 position: fixed; |
321 top: 0; | 343 top: 0; |
322 bottom: 0; | 344 bottom: 0; |
323 left: 0; | 345 left: 0; |
324 }; | 346 }; |
325 | 347 |
326 } | 348 } |
327 | 349 |
328 </style> | 350 </style> |
OLD | NEW |