| OLD | NEW |
|---|
| (Empty) | |
| 1 ## Overview |
| 2 |
| 3 The `iron-flex-layout` component provides simple ways to use [CSS flexible box l
ayout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), a
lso known as _flexbox_. This component provides two different ways to use flexbo
x: |
| 4 |
| 5 * Layout classes. The layout class stylesheet provides a simple set of class-b
ased flexbox rules. Layout classes |
| 6 let you specify layout properties directly in markup. |
| 7 |
| 8 * Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can
be applied |
| 9 inside a CSS rule using the `@apply` function. |
| 10 |
| 11 Using the classes or CSS mixins is largely a matter of preference. The following
sections discuss |
| 12 how to use the each of the stylesheets. |
| 13 |
| 14 > <b>Note:</b> Before using either of these stylesheets, it's helpful to be fami
liar with the basics |
| 15 of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tric
ks.com/snippets/css/a-guide-to-flexbox/) is a |
| 16 good primer.</aside> |
| 17 |
| 18 ### Using layout classes |
| 19 |
| 20 To use layout classes import the `iron-flex-layout-classes` file. You |
| 21 must do this in any element that uses any of the `iron-flex-layout` styles. |
| 22 ```html |
| 23 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-clas
ses.html"> |
| 24 ``` |
| 25 |
| 26 Then include the module(s) that you need: |
| 27 ```html |
| 28 <!-- include classes in the main document --> |
| 29 <style is="custom-style" include="iron-flex iron-flex-alignment"> |
| 30 ``` |
| 31 |
| 32 or: |
| 33 ```html |
| 34 <!-- import classes in an element --> |
| 35 <style include="iron-flex iron-flex-alignment"> |
| 36 ``` |
| 37 |
| 38 Then simply apply the classes to any element. |
| 39 ```html |
| 40 <div class="layout horizontal wrap"> |
| 41 ``` |
| 42 |
| 43 Many of the layout rules involve combinations of multiple classes (such as `layo
ut horizontal wrap` above), |
| 44 and will need a combination of modules. |
| 45 The order in which the classes are specified doesn't matter, so `layout horizont
al` and `horizontal layout` |
| 46 are equivalent. |
| 47 |
| 48 There are 5 modules available: |
| 49 - `iron-flex`. Basic flex layouts. |
| 50 - `iron-flex-reverse`. Reverse flexbox layouts. |
| 51 - `iron-flex-alignment`. Main axis, cross axis and self alignment. |
| 52 - `iron-flex-factors`. All the available flex factors. |
| 53 - `iron-positioning`. Generic, non-flexbox positioning helpers. |
| 54 |
| 55 **Example: using classes in the main document** |
| 56 ```html |
| 57 <head> |
| 58 |
| 59 ... |
| 60 |
| 61 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-cl
asses.html"> |
| 62 |
| 63 ... |
| 64 |
| 65 <!-- main document -- include the module you need in a custom-style element --
> |
| 66 <style is="custom-style" include="iron-flex"></style> |
| 67 |
| 68 </head> |
| 69 <body> |
| 70 |
| 71 <div class="layout horizontal"> |
| 72 <div>One</div> |
| 73 <div>Two</div> |
| 74 <div>Three</div> |
| 75 </div> |
| 76 |
| 77 </body> |
| 78 ``` |
| 79 **Example: using classes in a Polymer element** |
| 80 ```html |
| 81 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-clas
ses.html"> |
| 82 |
| 83 ... |
| 84 |
| 85 <dom-module id="mixin-demo"> |
| 86 |
| 87 <!-- inside an element -- include the module you need in a standard style elem
ent --> |
| 88 <style include="iron-flex"></style> |
| 89 |
| 90 <template> |
| 91 <div class="layout horizontal"> |
| 92 <div>One</div> |
| 93 <div>Two</div> |
| 94 <div>Three</div> |
| 95 </div> |
| 96 </template> |
| 97 |
| 98 <script> |
| 99 Polymer({ is: 'mixin-demo' }); |
| 100 </script> |
| 101 |
| 102 </dom-module> |
| 103 ``` |
| 104 |
| 105 It's important to note that unlike the previous layout class stylesheets |
| 106 (found in `/classes/iron-flex-layout.html`), the new version does not use the `/
deep/` |
| 107 combinator: it does not work across local DOM boundaries, |
| 108 and the modules must be imported into each scope where they're used. |
| 109 |
| 110 ### Using layout mixins |
| 111 |
| 112 Custom mixins can be applied inside a Polymer |
| 113 custom element's stylesheet, **or** inside a `custom-style` stylesheet to apply
styles to the |
| 114 main document. (They cannot be applied in the main document without a `custom-st
yle` stylesheet.) |
| 115 |
| 116 **Example: using mixins in the main document** |
| 117 ```html |
| 118 <head> |
| 119 |
| 120 ... |
| 121 |
| 122 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.ht
ml"> |
| 123 |
| 124 ... |
| 125 |
| 126 <!-- main document -- apply mixins in a custom-style element --> |
| 127 <style is="custom-style"> |
| 128 .container { |
| 129 @apply(--layout-horizontal); |
| 130 @apply(--layout-wrap); |
| 131 } |
| 132 </style> |
| 133 |
| 134 </head> |
| 135 <body> |
| 136 |
| 137 <div class="container"> |
| 138 <div>One</div> |
| 139 <div>Two</div> |
| 140 <div>Three</div> |
| 141 </div> |
| 142 |
| 143 </body> |
| 144 ``` |
| 145 **Example: using mixins in a Polymer element** |
| 146 ```html |
| 147 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html
"> |
| 148 |
| 149 ... |
| 150 |
| 151 <dom-module id="mixin-demo"> |
| 152 |
| 153 <!-- inside an element -- apply mixins in a standard style element --> |
| 154 <style> |
| 155 .container { |
| 156 @apply(--layout-horizontal); |
| 157 @apply(--layout-wrap); |
| 158 } |
| 159 </style> |
| 160 |
| 161 <template> |
| 162 <div class="container"> |
| 163 <div>One</div> |
| 164 <div>Two</div> |
| 165 <div>Three</div> |
| 166 </div> |
| 167 </template> |
| 168 |
| 169 <script> |
| 170 Polymer({ is: 'mixin-demo' }); |
| 171 </script> |
| 172 |
| 173 </dom-module> |
| 174 ``` |
| 175 |
| 176 In general the mixins require a little more code to use, but they can be prefera
ble if you |
| 177 don't want to use the classes, or if you want to switch layouts based on a media
query. |
| 178 |
| 179 Custom CSS properties and mixins are features provided by the Polymer library. |
| 180 See [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styl
ing.html#xscope-styling) |
| 181 in the Polymer developer guide. |
| 182 |
| 183 ## Horizontal and vertical layout |
| 184 |
| 185 Create a flex container that lays out its children vertically or horizontally. |
| 186 |
| 187 Class | Mixin | Result |
| 188 :-|:-|:- |
| 189 <code>layout horizontal</code>| <code>--layout-horizontal</code> | Horizontal la
yout container. |
| 190 <code>layout vertical</code> | <code>--layout-vertical</code> | Vertical layout
container. |
| 191 |
| 192 The classes listed here are included in the `iron-flex` module of the `iron-flex
-layout-classes` file. |
| 193 |
| 194 **Example: classes** |
| 195 ```html |
| 196 <div class="layout horizontal"> |
| 197 <div>One</div> |
| 198 <div>Two</div> |
| 199 <div>Three</div> |
| 200 </div> |
| 201 ``` |
| 202 |
| 203 **Example: mixins** |
| 204 <!-- |
| 205 ``` |
| 206 <custom-element-demo> |
| 207 <template> |
| 208 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 209 <link rel="import" href="iron-flex-layout.html"> |
| 210 <dom-module id="demo-element"> |
| 211 <template> |
| 212 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 213 <style> |
| 214 .container, .layout { |
| 215 background-color: #ccc; |
| 216 padding: 4px; |
| 217 } |
| 218 |
| 219 .container div, .layout div { |
| 220 background-color: white; |
| 221 padding: 12px; |
| 222 margin: 4px; |
| 223 } |
| 224 </style> |
| 225 <next-code-block></next-code-block> |
| 226 </template> |
| 227 <script>Polymer({is: "demo-element"});</script> |
| 228 </dom-module> |
| 229 <demo-element></demo-element> |
| 230 </template> |
| 231 </custom-element-demo> |
| 232 ``` |
| 233 --> |
| 234 ```html |
| 235 <style is="custom-style"> |
| 236 .container { |
| 237 @apply(--layout-horizontal); |
| 238 } |
| 239 </style> |
| 240 |
| 241 <div class="container"> |
| 242 <div>One</div> |
| 243 <div>Two</div> |
| 244 <div>Three</div> |
| 245 </div> |
| 246 ``` |
| 247 |
| 248 ### Flexible children |
| 249 |
| 250 Children of a flex container can use flex to control their own sizing. |
| 251 |
| 252 Class | Mixin | Result |
| 253 :-|:-|:- |
| 254 <code>flex</code>| <code>--layout-flex</code> | Expand the child to fill availab
le space in the main axis. |
| 255 <code>flex-<var>ratio</var></code>| <code>--layout-flex-<var>ratio</var></code>
| Assign a flex ratio of 1 to 12. |
| 256 <code>flex-none</code>| <code>--layout-flex-none</code> | Don't flex the child. |
| 257 <code>flex-auto</code>| <code>--layout-flex-auto</code> | Sets flex `flex-basis`
to `auto` and `flex-grow` and `flex-shrink` to 1. |
| 258 |
| 259 The classes listed here are included in the `iron-flex` module of the `iron-flex
-layout-classes` file. |
| 260 |
| 261 **Example: classes** |
| 262 ```html |
| 263 <div class="horizontal layout"> |
| 264 <div>Alpha</div> |
| 265 <div class="flex">Beta (flex)</div> |
| 266 <div>Gamma</div> |
| 267 </div> |
| 268 ``` |
| 269 |
| 270 **Example: mixins** |
| 271 <!-- |
| 272 ``` |
| 273 <custom-element-demo> |
| 274 <template> |
| 275 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 276 <link rel="import" href="iron-flex-layout.html"> |
| 277 <dom-module id="demo-element"> |
| 278 <template> |
| 279 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 280 <style> |
| 281 .container, .layout { |
| 282 background-color: #ccc; |
| 283 padding: 4px; |
| 284 } |
| 285 |
| 286 .container div, .layout div { |
| 287 background-color: white; |
| 288 padding: 12px; |
| 289 margin: 4px; |
| 290 } |
| 291 </style> |
| 292 <next-code-block></next-code-block> |
| 293 </template> |
| 294 <script>Polymer({is: "demo-element"});</script> |
| 295 </dom-module> |
| 296 <demo-element></demo-element> |
| 297 </template> |
| 298 </custom-element-demo> |
| 299 ``` |
| 300 --> |
| 301 ```html |
| 302 <style is="custom-style"> |
| 303 .container { |
| 304 @apply(--layout-horizontal); |
| 305 } |
| 306 .flexchild { |
| 307 @apply(--layout-flex); |
| 308 } |
| 309 </style> |
| 310 |
| 311 <div class="container"> |
| 312 <div>Alpha</div> |
| 313 <div class="flexchild">Beta (flex)</div> |
| 314 <div>Gamma</div> |
| 315 </div> |
| 316 ``` |
| 317 |
| 318 #### Flexible children in vertical layouts |
| 319 |
| 320 The same rules can be used for children in vertical layouts. |
| 321 |
| 322 **Example: classes** |
| 323 ```html |
| 324 <div class="vertical layout" style="height:250px"> |
| 325 <div>Alpha</div> |
| 326 <div class="flex">Beta (flex)</div> |
| 327 <div>Gamma</div> |
| 328 </div> |
| 329 ``` |
| 330 |
| 331 **Example: mixins** |
| 332 <!-- |
| 333 ``` |
| 334 <custom-element-demo> |
| 335 <template> |
| 336 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 337 <link rel="import" href="iron-flex-layout.html"> |
| 338 <dom-module id="demo-element"> |
| 339 <template> |
| 340 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 341 <style> |
| 342 .container, .layout { |
| 343 background-color: #ccc; |
| 344 padding: 4px; |
| 345 } |
| 346 |
| 347 .container div, .layout div { |
| 348 background-color: white; |
| 349 padding: 12px; |
| 350 margin: 4px; |
| 351 } |
| 352 </style> |
| 353 <next-code-block></next-code-block> |
| 354 </template> |
| 355 <script>Polymer({is: "demo-element"});</script> |
| 356 </dom-module> |
| 357 <demo-element></demo-element> |
| 358 </template> |
| 359 </custom-element-demo> |
| 360 ``` |
| 361 --> |
| 362 ```html |
| 363 <style is="custom-style"> |
| 364 .container { |
| 365 @apply(--layout-vertical); |
| 366 } |
| 367 .flexchild { |
| 368 @apply(--layout-flex); |
| 369 } |
| 370 </style> |
| 371 |
| 372 <div class="container" style="height: 250px"> |
| 373 <div>One</div> |
| 374 <div class="flexchild">Two</div> |
| 375 <div>Three</div> |
| 376 </div> |
| 377 ``` |
| 378 |
| 379 > **Note**: for vertical layouts, the container needs to have a height for the |
| 380 children to flex correctly. |
| 381 |
| 382 #### Flex ratios |
| 383 |
| 384 Children elements can be told to take up more space by including a "flex ratio" |
| 385 from 1 to 12. This is equivalent to specifying the CSS `flex-grow` property. |
| 386 |
| 387 For example, the following examples make "Gamma" 2x larger than "Beta" and "Alph
a" 3x larger, use |
| 388 `flex-2` and `flex-3`, respectively. |
| 389 |
| 390 The classes listed here are included in the `iron-flex-factors` module of the `i
ron-flex-layout-classes` file. |
| 391 |
| 392 **Example: classes** |
| 393 ```html |
| 394 <div class="horizontal layout demo"> |
| 395 <div class="flex-3">Alpha</div> |
| 396 <div class="flex">Beta</div> |
| 397 <div class="flex-2">Gamma</div> |
| 398 </div> |
| 399 ``` |
| 400 |
| 401 **Example: mixins** |
| 402 <!-- |
| 403 ``` |
| 404 <custom-element-demo> |
| 405 <template> |
| 406 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 407 <link rel="import" href="iron-flex-layout.html"> |
| 408 <dom-module id="demo-element"> |
| 409 <template> |
| 410 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 411 <style> |
| 412 .container, .layout { |
| 413 background-color: #ccc; |
| 414 padding: 4px; |
| 415 } |
| 416 |
| 417 .container div, .layout div { |
| 418 background-color: white; |
| 419 padding: 12px; |
| 420 margin: 4px; |
| 421 } |
| 422 </style> |
| 423 <next-code-block></next-code-block> |
| 424 </template> |
| 425 <script>Polymer({is: "demo-element"});</script> |
| 426 </dom-module> |
| 427 <demo-element></demo-element> |
| 428 </template> |
| 429 </custom-element-demo> |
| 430 ``` |
| 431 --> |
| 432 ```html |
| 433 <style is="custom-style"> |
| 434 .container { |
| 435 @apply(--layout-horizontal); |
| 436 } |
| 437 .flexchild { |
| 438 @apply(--layout-flex) |
| 439 } |
| 440 .flex2child { |
| 441 @apply(--layout-flex-2); |
| 442 } |
| 443 .flex3child { |
| 444 @apply(--layout-flex-3); |
| 445 } |
| 446 </style> |
| 447 |
| 448 <div class="container"> |
| 449 <div class="flex3child">One</div> |
| 450 <div class="flexchild">Two</div> |
| 451 <div class="flex2child">Three</div> |
| 452 </div> |
| 453 ``` |
| 454 |
| 455 ### Cross-axis alignment |
| 456 |
| 457 By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching i
n a _horizontal_ layout). |
| 458 |
| 459 <!-- |
| 460 ``` |
| 461 <custom-element-demo> |
| 462 <template> |
| 463 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 464 <link rel="import" href="iron-flex-layout-classes.html"> |
| 465 <dom-module id="demo-element"> |
| 466 <template> |
| 467 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 468 <style> |
| 469 .container, .layout { |
| 470 background-color: #ccc; |
| 471 padding: 4px; |
| 472 } |
| 473 |
| 474 .container div, .layout div { |
| 475 background-color: white; |
| 476 padding: 12px; |
| 477 margin: 4px; |
| 478 } |
| 479 </style> |
| 480 <next-code-block></next-code-block> |
| 481 </template> |
| 482 <script>Polymer({is: "demo-element"});</script> |
| 483 </dom-module> |
| 484 <demo-element></demo-element> |
| 485 </template> |
| 486 </custom-element-demo> |
| 487 ``` |
| 488 --> |
| 489 ```html |
| 490 <div class="horizontal layout" style="height: 154px"> |
| 491 <div>Stretch Fill</div> |
| 492 </div> |
| 493 ``` |
| 494 |
| 495 Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizont
al_ layout) |
| 496 by adding the `center` class or applying the `--layout-center` mixin. |
| 497 |
| 498 **Example: classes, cross-axis center** |
| 499 <!-- |
| 500 ``` |
| 501 <custom-element-demo> |
| 502 <template> |
| 503 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 504 <link rel="import" href="iron-flex-layout-classes.html"> |
| 505 <dom-module id="demo-element"> |
| 506 <template> |
| 507 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 508 <style> |
| 509 .container, .layout { |
| 510 background-color: #ccc; |
| 511 padding: 4px; |
| 512 } |
| 513 |
| 514 .container div, .layout div { |
| 515 background-color: white; |
| 516 padding: 12px; |
| 517 margin: 4px; |
| 518 } |
| 519 </style> |
| 520 <next-code-block></next-code-block> |
| 521 </template> |
| 522 <script>Polymer({is: "demo-element"});</script> |
| 523 </dom-module> |
| 524 <demo-element></demo-element> |
| 525 </template> |
| 526 </custom-element-demo> |
| 527 ``` |
| 528 --> |
| 529 ```html |
| 530 <div class="horizontal layout center" style="height: 154px"> |
| 531 <div>Center</div> |
| 532 </div> |
| 533 ``` |
| 534 |
| 535 **Example: mixins, cross-axis center** |
| 536 <!-- |
| 537 ``` |
| 538 <custom-element-demo> |
| 539 <template> |
| 540 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 541 <link rel="import" href="iron-flex-layout.html"> |
| 542 <dom-module id="demo-element"> |
| 543 <template> |
| 544 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 545 <style> |
| 546 .container, .layout { |
| 547 background-color: #ccc; |
| 548 padding: 4px; |
| 549 height: 154px; |
| 550 } |
| 551 |
| 552 .container div, .layout div { |
| 553 background-color: white; |
| 554 padding: 12px; |
| 555 margin: 4px; |
| 556 } |
| 557 </style> |
| 558 <next-code-block></next-code-block> |
| 559 </template> |
| 560 <script>Polymer({is: "demo-element"});</script> |
| 561 </dom-module> |
| 562 <demo-element></demo-element> |
| 563 </template> |
| 564 </custom-element-demo> |
| 565 ``` |
| 566 --> |
| 567 ```html |
| 568 <style is="custom-style"> |
| 569 .container { |
| 570 @apply(--layout-horizontal); |
| 571 @apply(--layout-center); |
| 572 } |
| 573 </style> |
| 574 |
| 575 <div class="container" style="height: 154px"> |
| 576 <div>Center</div> |
| 577 </div> |
| 578 ``` |
| 579 |
| 580 You can also position at the top/bottom (or left/right in `vertical` layouts) us
ing the `start` or `end` |
| 581 classes, or by applying the `--layout-start` or `--layout-end` mixins. |
| 582 |
| 583 |
| 584 **Example: classes, cross-axis start** |
| 585 <!-- |
| 586 ``` |
| 587 <custom-element-demo> |
| 588 <template> |
| 589 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 590 <link rel="import" href="iron-flex-layout-classes.html"> |
| 591 <dom-module id="demo-element"> |
| 592 <template> |
| 593 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 594 <style> |
| 595 .container, .layout { |
| 596 background-color: #ccc; |
| 597 padding: 4px; |
| 598 } |
| 599 |
| 600 .container div, .layout div { |
| 601 background-color: white; |
| 602 padding: 12px; |
| 603 margin: 4px; |
| 604 } |
| 605 </style> |
| 606 <next-code-block></next-code-block> |
| 607 </template> |
| 608 <script>Polymer({is: "demo-element"});</script> |
| 609 </dom-module> |
| 610 <demo-element></demo-element> |
| 611 </template> |
| 612 </custom-element-demo> |
| 613 ``` |
| 614 --> |
| 615 ```html |
| 616 <div class="horizontal layout start" style="height: 154px"> |
| 617 <div>start</div> |
| 618 </div> |
| 619 ``` |
| 620 |
| 621 **Example: mixins, cross-axis start** |
| 622 <!-- |
| 623 ``` |
| 624 <custom-element-demo> |
| 625 <template> |
| 626 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 627 <link rel="import" href="iron-flex-layout.html"> |
| 628 <dom-module id="demo-element"> |
| 629 <template> |
| 630 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 631 <style> |
| 632 .container, .layout { |
| 633 background-color: #ccc; |
| 634 padding: 4px; |
| 635 } |
| 636 |
| 637 .container div, .layout div { |
| 638 background-color: white; |
| 639 padding: 12px; |
| 640 margin: 4px; |
| 641 } |
| 642 </style> |
| 643 <next-code-block></next-code-block> |
| 644 </template> |
| 645 <script>Polymer({is: "demo-element"});</script> |
| 646 </dom-module> |
| 647 <demo-element></demo-element> |
| 648 </template> |
| 649 </custom-element-demo> |
| 650 ``` |
| 651 --> |
| 652 ```html |
| 653 <style is="custom-style"> |
| 654 .container { |
| 655 @apply(--layout-horizontal); |
| 656 @apply(--layout-start); |
| 657 } |
| 658 </style> |
| 659 |
| 660 <div class="container" style="height: 154px"> |
| 661 <div>start</div> |
| 662 </div> |
| 663 ``` |
| 664 |
| 665 **Example: classes, cross-axis end** |
| 666 <!-- |
| 667 ``` |
| 668 <custom-element-demo> |
| 669 <template> |
| 670 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 671 <link rel="import" href="iron-flex-layout-classes.html"> |
| 672 <dom-module id="demo-element"> |
| 673 <template> |
| 674 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 675 <style> |
| 676 .container, .layout { |
| 677 background-color: #ccc; |
| 678 padding: 4px; |
| 679 } |
| 680 |
| 681 .container div, .layout div { |
| 682 background-color: white; |
| 683 padding: 12px; |
| 684 margin: 4px; |
| 685 } |
| 686 </style> |
| 687 <next-code-block></next-code-block> |
| 688 </template> |
| 689 <script>Polymer({is: "demo-element"});</script> |
| 690 </dom-module> |
| 691 <demo-element></demo-element> |
| 692 </template> |
| 693 </custom-element-demo> |
| 694 ``` |
| 695 --> |
| 696 ```html |
| 697 <div class="horizontal layout end" style="height: 154px"> |
| 698 <div>end</div> |
| 699 </div> |
| 700 ``` |
| 701 |
| 702 **Example: mixins, cross-axis end** |
| 703 <!-- |
| 704 ``` |
| 705 <custom-element-demo> |
| 706 <template> |
| 707 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 708 <link rel="import" href="iron-flex-layout.html"> |
| 709 <dom-module id="demo-element"> |
| 710 <template> |
| 711 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 712 <style> |
| 713 .container, .layout { |
| 714 background-color: #ccc; |
| 715 padding: 4px; |
| 716 } |
| 717 |
| 718 .container div, .layout div { |
| 719 background-color: white; |
| 720 padding: 12px; |
| 721 margin: 4px; |
| 722 } |
| 723 </style> |
| 724 <next-code-block></next-code-block> |
| 725 </template> |
| 726 <script>Polymer({is: "demo-element"});</script> |
| 727 </dom-module> |
| 728 <demo-element></demo-element> |
| 729 </template> |
| 730 </custom-element-demo> |
| 731 ``` |
| 732 --> |
| 733 ```html |
| 734 <style is="custom-style"> |
| 735 .container { |
| 736 @apply(--layout-horizontal); |
| 737 @apply(--layout-end); |
| 738 } |
| 739 </style> |
| 740 |
| 741 <div class="container" style="height: 154px"> |
| 742 <div>end</div> |
| 743 </div> |
| 744 ``` |
| 745 |
| 746 ### Justification |
| 747 |
| 748 Justifying aligns contents along the **main axis**. Justify the layout |
| 749 by specifying one of the following. |
| 750 |
| 751 |
| 752 Class | Mixin | Result |
| 753 :-|:-|:- |
| 754 `start-justified`| <code>--layout-start-justified</code> | Aligns contents at th
e start of the main axis. |
| 755 `center-justified` | <code>--layout-center-justified</code> | Centers contents a
long the main axis. |
| 756 `end-justified` | <code>--layout-end-justified</code> | Aligns contents to the e
nd of the main axis. |
| 757 `justified` | <code>--layout-justified</code> | Aligns contents with equal space
s between children. |
| 758 `around-justified` | <code>--layout-around-justified</code> | Aligns contents wi
th equal spaces arround children. |
| 759 |
| 760 The classes listed here are included in the `iron-flex-alignment` module of the
`iron-flex-layout-classes` file. |
| 761 |
| 762 **Example: classes, start justified** |
| 763 <!-- |
| 764 ``` |
| 765 <custom-element-demo> |
| 766 <template> |
| 767 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 768 <link rel="import" href="iron-flex-layout-classes.html"> |
| 769 <dom-module id="demo-element"> |
| 770 <template> |
| 771 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 772 <style> |
| 773 .container, .layout { |
| 774 background-color: #ccc; |
| 775 padding: 4px; |
| 776 } |
| 777 |
| 778 .container div, .layout div { |
| 779 background-color: white; |
| 780 padding: 12px; |
| 781 margin: 4px; |
| 782 } |
| 783 </style> |
| 784 <next-code-block></next-code-block> |
| 785 </template> |
| 786 <script>Polymer({is: "demo-element"});</script> |
| 787 </dom-module> |
| 788 <demo-element></demo-element> |
| 789 </template> |
| 790 </custom-element-demo> |
| 791 ``` |
| 792 --> |
| 793 ```html |
| 794 <div class="horizontal start-justified layout"> |
| 795 <div>start-justified</div> |
| 796 </div> |
| 797 ``` |
| 798 |
| 799 **Example: mixins, center justified** |
| 800 <!-- |
| 801 ``` |
| 802 <custom-element-demo> |
| 803 <template> |
| 804 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 805 <link rel="import" href="iron-flex-layout.html"> |
| 806 <dom-module id="demo-element"> |
| 807 <template> |
| 808 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 809 <style> |
| 810 .container, .layout { |
| 811 background-color: #ccc; |
| 812 padding: 4px; |
| 813 } |
| 814 |
| 815 .container div, .layout div { |
| 816 background-color: white; |
| 817 padding: 12px; |
| 818 margin: 4px; |
| 819 } |
| 820 </style> |
| 821 <next-code-block></next-code-block> |
| 822 </template> |
| 823 <script>Polymer({is: "demo-element"});</script> |
| 824 </dom-module> |
| 825 <demo-element></demo-element> |
| 826 </template> |
| 827 </custom-element-demo> |
| 828 ``` |
| 829 --> |
| 830 ```html |
| 831 <style is="custom-style"> |
| 832 .container { |
| 833 @apply(--layout-horizontal); |
| 834 @apply(--layout-center-justified); |
| 835 } |
| 836 </style> |
| 837 |
| 838 <div class="container"> |
| 839 <div>center-justified</div> |
| 840 </div> |
| 841 ``` |
| 842 |
| 843 **Example: classes, end justified** |
| 844 <!-- |
| 845 ``` |
| 846 <custom-element-demo> |
| 847 <template> |
| 848 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 849 <link rel="import" href="iron-flex-layout-classes.html"> |
| 850 <dom-module id="demo-element"> |
| 851 <template> |
| 852 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 853 <style> |
| 854 .container, .layout { |
| 855 background-color: #ccc; |
| 856 padding: 4px; |
| 857 } |
| 858 |
| 859 .container div, .layout div { |
| 860 background-color: white; |
| 861 padding: 12px; |
| 862 margin: 4px; |
| 863 } |
| 864 </style> |
| 865 <next-code-block></next-code-block> |
| 866 </template> |
| 867 <script>Polymer({is: "demo-element"});</script> |
| 868 </dom-module> |
| 869 <demo-element></demo-element> |
| 870 </template> |
| 871 </custom-element-demo> |
| 872 ``` |
| 873 --> |
| 874 ```html |
| 875 <div class="horizontal end-justified layout"> |
| 876 <div>end-justified</div> |
| 877 </div> |
| 878 ``` |
| 879 |
| 880 **Example: mixins, equal space between elements** |
| 881 <!-- |
| 882 ``` |
| 883 <custom-element-demo> |
| 884 <template> |
| 885 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 886 <link rel="import" href="iron-flex-layout.html"> |
| 887 <dom-module id="demo-element"> |
| 888 <template> |
| 889 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 890 <style> |
| 891 .container, .layout { |
| 892 background-color: #ccc; |
| 893 padding: 4px; |
| 894 } |
| 895 |
| 896 .container div, .layout div { |
| 897 background-color: white; |
| 898 padding: 12px; |
| 899 margin: 4px; |
| 900 } |
| 901 </style> |
| 902 <next-code-block></next-code-block> |
| 903 </template> |
| 904 <script>Polymer({is: "demo-element"});</script> |
| 905 </dom-module> |
| 906 <demo-element></demo-element> |
| 907 </template> |
| 908 </custom-element-demo> |
| 909 ``` |
| 910 --> |
| 911 ```html |
| 912 <style is="custom-style"> |
| 913 .container { |
| 914 @apply(--layout-horizontal); |
| 915 @apply(--layout-justified); |
| 916 } |
| 917 </style> |
| 918 |
| 919 <div class="container"> |
| 920 <div>justified</div> |
| 921 <div>justified</div> |
| 922 <div>justified</div> |
| 923 </div> |
| 924 ``` |
| 925 |
| 926 **Example: classes, equal space around each element** |
| 927 <!-- |
| 928 ``` |
| 929 <custom-element-demo> |
| 930 <template> |
| 931 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 932 <link rel="import" href="iron-flex-layout-classes.html"> |
| 933 <dom-module id="demo-element"> |
| 934 <template> |
| 935 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 936 <style> |
| 937 .container, .layout { |
| 938 background-color: #ccc; |
| 939 padding: 4px; |
| 940 } |
| 941 |
| 942 .container div, .layout div { |
| 943 background-color: white; |
| 944 padding: 12px; |
| 945 margin: 4px; |
| 946 } |
| 947 </style> |
| 948 <next-code-block></next-code-block> |
| 949 </template> |
| 950 <script>Polymer({is: "demo-element"});</script> |
| 951 </dom-module> |
| 952 <demo-element></demo-element> |
| 953 </template> |
| 954 </custom-element-demo> |
| 955 ``` |
| 956 --> |
| 957 ```html |
| 958 <div class="horizontal around-justified layout"> |
| 959 <div>around-justified</div> |
| 960 <div>around-justified</div> |
| 961 </div> |
| 962 ``` |
| 963 |
| 964 ## Self alignment |
| 965 |
| 966 Alignment can also be set per-child (instead of using the layout container's rul
es). |
| 967 |
| 968 Class | Mixin | Result |
| 969 :-|:-|:- |
| 970 `self-start`| <code>--layout-self-start</code> | Aligns the child at the start o
f the cross-axis. |
| 971 `self-center` | <code>--layout-self-center</code> | Centers the child along the
cross-axis. |
| 972 `self-end` | <code>--layout-self-end</code> | Aligns the child at the end of the
cross-axis. |
| 973 `self-stretch` | <code>--layout-self-stretch</code> | Stretches the child to fit
the cross-axis. |
| 974 |
| 975 **Example: classes** |
| 976 <!-- |
| 977 ``` |
| 978 <custom-element-demo> |
| 979 <template> |
| 980 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 981 <link rel="import" href="iron-flex-layout-classes.html"> |
| 982 <dom-module id="demo-element"> |
| 983 <template> |
| 984 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 985 <style> |
| 986 .container, .layout { |
| 987 background-color: #ccc; |
| 988 padding: 4px; |
| 989 } |
| 990 |
| 991 .container div, .layout div { |
| 992 background-color: white; |
| 993 padding: 12px; |
| 994 margin: 4px; |
| 995 } |
| 996 </style> |
| 997 <next-code-block></next-code-block> |
| 998 </template> |
| 999 <script>Polymer({is: "demo-element"});</script> |
| 1000 </dom-module> |
| 1001 <demo-element></demo-element> |
| 1002 </template> |
| 1003 </custom-element-demo> |
| 1004 ``` |
| 1005 --> |
| 1006 ```html |
| 1007 <div class="horizontal layout" style="height: 120px;"> |
| 1008 <div class="flex self-start">Alpha</div> |
| 1009 <div class="flex self-center">Beta</div> |
| 1010 <div class="flex self-end">Gamma</div> |
| 1011 <div class="flex self-stretch">Delta</div> |
| 1012 </div> |
| 1013 ``` |
| 1014 |
| 1015 **Example: mixins** |
| 1016 <!-- |
| 1017 ``` |
| 1018 <custom-element-demo> |
| 1019 <template> |
| 1020 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 1021 <link rel="import" href="iron-flex-layout.html"> |
| 1022 <dom-module id="demo-element"> |
| 1023 <template> |
| 1024 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 1025 <style> |
| 1026 .container, .layout { |
| 1027 background-color: #ccc; |
| 1028 padding: 4px; |
| 1029 } |
| 1030 |
| 1031 .container div, .layout div { |
| 1032 background-color: white; |
| 1033 padding: 12px; |
| 1034 margin: 4px; |
| 1035 } |
| 1036 </style> |
| 1037 <next-code-block></next-code-block> |
| 1038 </template> |
| 1039 <script>Polymer({is: "demo-element"});</script> |
| 1040 </dom-module> |
| 1041 <demo-element></demo-element> |
| 1042 </template> |
| 1043 </custom-element-demo> |
| 1044 ``` |
| 1045 --> |
| 1046 ```html |
| 1047 <style is="custom-style"> |
| 1048 .container { |
| 1049 @apply(--layout-horizontal); |
| 1050 @apply(--layout-justified); |
| 1051 height: 120px; |
| 1052 } |
| 1053 .container div { |
| 1054 @apply(--layout-flex); |
| 1055 } |
| 1056 .child1 { |
| 1057 @apply(--layout-self-start); |
| 1058 } |
| 1059 .child2 { |
| 1060 @apply(--layout-self-center); |
| 1061 } |
| 1062 .child3 { |
| 1063 @apply(--layout-self-end); |
| 1064 } |
| 1065 .child4 { |
| 1066 @apply(--layout-self-stretch); |
| 1067 } |
| 1068 </style> |
| 1069 <div class="container"> |
| 1070 <div class="child1">Alpha</div> |
| 1071 <div class="child2">Beta</div> |
| 1072 <div class="child3">Gamma</div> |
| 1073 <div class="child4">Delta</div> |
| 1074 </div> |
| 1075 ``` |
| 1076 |
| 1077 > <b>Note:</b> The <code>flex</code> class |
| 1078 (and <code>--layout-flex</code> mixin) shown in these examples is |
| 1079 added for the demo and not required for self-alignment. |
| 1080 |
| 1081 |
| 1082 ## Wrapping |
| 1083 |
| 1084 Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin. |
| 1085 |
| 1086 **Example: classes** |
| 1087 <!-- |
| 1088 ``` |
| 1089 <custom-element-demo> |
| 1090 <template> |
| 1091 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 1092 <link rel="import" href="iron-flex-layout-classes.html"> |
| 1093 <dom-module id="demo-element"> |
| 1094 <template> |
| 1095 <style is="custom-style" include="iron-flex iron-flex-alignment"></style
> |
| 1096 <style> |
| 1097 .container, .layout { |
| 1098 background-color: #ccc; |
| 1099 padding: 4px; |
| 1100 } |
| 1101 |
| 1102 .container div, .layout div { |
| 1103 background-color: white; |
| 1104 padding: 12px; |
| 1105 margin: 4px; |
| 1106 } |
| 1107 </style> |
| 1108 <next-code-block></next-code-block> |
| 1109 </template> |
| 1110 <script>Polymer({is: "demo-element"});</script> |
| 1111 </dom-module> |
| 1112 <demo-element></demo-element> |
| 1113 </template> |
| 1114 </custom-element-demo> |
| 1115 ``` |
| 1116 --> |
| 1117 ```html |
| 1118 <div class="horizontal layout wrap" style="width: 220px"> |
| 1119 <div>Alpha</div> |
| 1120 <div>Beta</div> |
| 1121 <div>Gamma</div> |
| 1122 <div>Delta</div> |
| 1123 </div> |
| 1124 ``` |
| 1125 |
| 1126 ## Reversed layouts |
| 1127 |
| 1128 Layout direction can be mirrored using the following rules: |
| 1129 |
| 1130 Class | Mixin | Result |
| 1131 :-|:-|:- |
| 1132 <code>layout horizontal-reverse</code>| <code>--layout-horizontal-reverse</code>
| Horizontal layout with children laid out in reverse order (last-to-first). |
| 1133 <code>layout vertical-reverse</code> | <code>--layout-vertical-reverse</code> |
Vertical layout with children laid out in reverse order. |
| 1134 <code>layout wrap-reverse</code> | <code>--layout-wrap-reverse</code> | Wrap lay
out with wrapped rows placed in the reverse order (for example, in a vertical la
yout, the second row is placed above the first row, instead of below). |
| 1135 |
| 1136 The classes listed here are included in the `iron-flex-reverse` module of the `i
ron-flex-layout-classes` file. |
| 1137 |
| 1138 **Example: mixins** |
| 1139 <!-- |
| 1140 ``` |
| 1141 <custom-element-demo> |
| 1142 <template> |
| 1143 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 1144 <link rel="import" href="iron-flex-layout.html"> |
| 1145 <dom-module id="demo-element"> |
| 1146 <template> |
| 1147 <style is="custom-style" include="iron-flex iron-flex-alignment iron-fle
x-reverse"></style> |
| 1148 <style> |
| 1149 .container, .layout { |
| 1150 background-color: #ccc; |
| 1151 padding: 4px; |
| 1152 } |
| 1153 |
| 1154 .container div, .layout div { |
| 1155 background-color: white; |
| 1156 padding: 12px; |
| 1157 margin: 4px; |
| 1158 } |
| 1159 </style> |
| 1160 <next-code-block></next-code-block> |
| 1161 </template> |
| 1162 <script>Polymer({is: "demo-element"});</script> |
| 1163 </dom-module> |
| 1164 <demo-element></demo-element> |
| 1165 </template> |
| 1166 </custom-element-demo> |
| 1167 ``` |
| 1168 --> |
| 1169 ```html |
| 1170 <style is="custom-style"> |
| 1171 .container { |
| 1172 @apply(--layout-horizontal-reverse); |
| 1173 } |
| 1174 </style> |
| 1175 |
| 1176 <div class="container"> |
| 1177 <div>Alpha</div> |
| 1178 <div>Beta</div> |
| 1179 <div>Gamma</div> |
| 1180 <div>Delta</div> |
| 1181 </div> |
| 1182 ``` |
| 1183 |
| 1184 ## Full bleed <body> |
| 1185 |
| 1186 It's common to want the entire `<body>` to fit to the viewport. By themselves, P
olymer's layout features on |
| 1187 `<body>` don't achieve the result. You can make `<body>` take up the entire view
port by adding the `fullbleed` class: |
| 1188 |
| 1189 ```html |
| 1190 <body class="fullbleed vertical layout"> |
| 1191 <div class="flex">Fitting a fullbleed body.</div> |
| 1192 </body> |
| 1193 ``` |
| 1194 |
| 1195 This removes its margins and maximizes its height to the viewport. There is no e
quivalent mixin, but the same result can |
| 1196 be achieved in CSS very simply: |
| 1197 ```css |
| 1198 body { |
| 1199 margin: 0; |
| 1200 height: 100vh; |
| 1201 } |
| 1202 ``` |
| 1203 |
| 1204 This class is included in the `iron-positioning` module of the `iron-flex-layout
-classes` file. |
| 1205 |
| 1206 Note that the `fullbleed` class **only works on the `<body>` tag.** This is the
only rule in the |
| 1207 stylesheet that is scoped to a particular tag. |
| 1208 |
| 1209 |
| 1210 ## General purpose rules |
| 1211 |
| 1212 Polymer also includes other general purpose rules for basic positioning: |
| 1213 |
| 1214 Class | Mixin | Result |
| 1215 :-|:-|:- |
| 1216 `block`| `--layout-block` | Assigns `display: block` |
| 1217 `invisible` | `--layout-invisible` | Assigns `visibility: hidden` |
| 1218 `relative` | `--layout-relative` | Assigns `position: relative` |
| 1219 `fit` | `--layout-fit` | Sets `position: absolute` and sets `top:0;right:0;botto
m:0;left:0;` (aka "trbl fitting"). |
| 1220 |
| 1221 The classes listed here are included in the `iron-positioning` module of the `ir
on-flex-layout-classes` file. |
| 1222 |
| 1223 > <b>Note:</b>When using `fit` layout, the element must have an ancestor with fi
xed size and `position: relative` layout |
| 1224 to fit inside of. |
| 1225 |
| 1226 |
| 1227 **Example: classes** |
| 1228 <!-- |
| 1229 ``` |
| 1230 <custom-element-demo> |
| 1231 <template> |
| 1232 <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> |
| 1233 <link rel="import" href="iron-flex-layout-classes.html"> |
| 1234 <dom-module id="demo-element"> |
| 1235 <template> |
| 1236 <style is="custom-style" include="iron-flex iron-flex-alignment iron-pos
itioning"></style> |
| 1237 <style> |
| 1238 :host { |
| 1239 display: block; |
| 1240 background: #ccc; |
| 1241 } |
| 1242 |
| 1243 .demo { |
| 1244 background-color: white; |
| 1245 margin: 12px; |
| 1246 padding: 4px; |
| 1247 } |
| 1248 </style> |
| 1249 <next-code-block></next-code-block> |
| 1250 </template> |
| 1251 <script>Polymer({is: "demo-element"});</script> |
| 1252 </dom-module> |
| 1253 <demo-element></demo-element> |
| 1254 </template> |
| 1255 </custom-element-demo> |
| 1256 ``` |
| 1257 --> |
| 1258 ```html |
| 1259 <div class="demo">Before <span>[A Span]</span> After</div> |
| 1260 <div class="demo">Before <span class="block">[A Block Span]</span> After</div> |
| 1261 <div class="demo">Before invisible span <span class="invisible">Not displayed</s
pan> After invisible span</div> |
| 1262 <div class="relative" style="height: 100px;"> |
| 1263 <div class="fit" style="background-color: #000;color: white">Fit</div> |
| 1264 </div> |
| 1265 ``` |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 3010683002:
Update Polymer components. (Closed)
