diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md | 1265 |
1 files changed, 1265 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md b/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md new file mode 100644 index 00000000..67a9e309 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md @@ -0,0 +1,1265 @@ +## Overview + +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 flexbox: + +* Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes + let you specify layout properties directly in markup. + +* Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied + inside a CSS rule using the `@apply` function. + +Using the classes or CSS mixins is largely a matter of preference. The following sections discuss +how to use the each of the stylesheets. + +> <b>Note:</b> Before using either of these stylesheets, it's helpful to be familiar with the basics +of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a +good primer.</aside> + +### Using layout classes + +To use layout classes import the `iron-flex-layout-classes` file. You +must do this in any element that uses any of the `iron-flex-layout` styles. +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> +``` + +Then include the module(s) that you need: +```html +<!-- include classes in the main document --> +<style is="custom-style" include="iron-flex iron-flex-alignment"> +``` + +or: +```html +<!-- import classes in an element --> +<style include="iron-flex iron-flex-alignment"> +``` + +Then simply apply the classes to any element. +```html +<div class="layout horizontal wrap"> +``` + +Many of the layout rules involve combinations of multiple classes (such as `layout horizontal wrap` above), +and will need a combination of modules. +The order in which the classes are specified doesn't matter, so `layout horizontal` and `horizontal layout` +are equivalent. + +There are 5 modules available: +- `iron-flex`. Basic flex layouts. +- `iron-flex-reverse`. Reverse flexbox layouts. +- `iron-flex-alignment`. Main axis, cross axis and self alignment. +- `iron-flex-factors`. All the available flex factors. +- `iron-positioning`. Generic, non-flexbox positioning helpers. + +**Example: using classes in the main document** +```html +<head> + + ... + + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> + + ... + + <!-- main document -- include the module you need in a custom-style element --> + <style is="custom-style" include="iron-flex"></style> + +</head> +<body> + + <div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + +</body> +``` +**Example: using classes in a Polymer element** +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> + + ... + +<dom-module id="mixin-demo"> + + <!-- inside an element -- include the module you need in a standard style element --> + <style include="iron-flex"></style> + + <template> + <div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + </template> + + <script> + Polymer({ is: 'mixin-demo' }); + </script> + +</dom-module> +``` + +It's important to note that unlike the previous layout class stylesheets +(found in `/classes/iron-flex-layout.html`), the new version does not use the `/deep/` +combinator: it does not work across local DOM boundaries, +and the modules must be imported into each scope where they're used. + +### Using layout mixins + +Custom mixins can be applied inside a Polymer +custom element's stylesheet, **or** inside a `custom-style` stylesheet to apply styles to the +main document. (They cannot be applied in the main document without a `custom-style` stylesheet.) + +**Example: using mixins in the main document** +```html +<head> + + ... + + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> + + ... + + <!-- main document -- apply mixins in a custom-style element --> + <style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-wrap); + } + </style> + +</head> +<body> + + <div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + +</body> +``` +**Example: using mixins in a Polymer element** +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> + + ... + +<dom-module id="mixin-demo"> + + <!-- inside an element -- apply mixins in a standard style element --> + <style> + .container { + @apply(--layout-horizontal); + @apply(--layout-wrap); + } + </style> + + <template> + <div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + </template> + + <script> + Polymer({ is: 'mixin-demo' }); + </script> + +</dom-module> +``` + +In general the mixins require a little more code to use, but they can be preferable if you +don't want to use the classes, or if you want to switch layouts based on a media query. + +Custom CSS properties and mixins are features provided by the Polymer library. +See [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling) +in the Polymer developer guide. + +## Horizontal and vertical layout + +Create a flex container that lays out its children vertically or horizontally. + +Class | Mixin | Result +:-|:-|:- +<code>layout horizontal</code>| <code>--layout-horizontal</code> | Horizontal layout container. +<code>layout vertical</code> | <code>--layout-vertical</code> | Vertical layout container. + +The classes listed here are included in the `iron-flex` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } +</style> + +<div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +``` + +### Flexible children + +Children of a flex container can use flex to control their own sizing. + +Class | Mixin | Result +:-|:-|:- +<code>flex</code>| <code>--layout-flex</code> | Expand the child to fill available space in the main axis. +<code>flex-<var>ratio</var></code>| <code>--layout-flex-<var>ratio</var></code> | Assign a flex ratio of 1 to 12. +<code>flex-none</code>| <code>--layout-flex-none</code> | Don't flex the child. +<code>flex-auto</code>| <code>--layout-flex-auto</code> | Sets flex `flex-basis` to `auto` and `flex-grow` and `flex-shrink` to 1. + +The classes listed here are included in the `iron-flex` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="horizontal layout"> + <div>Alpha</div> + <div class="flex">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } +</style> + +<div class="container"> +<div>Alpha</div> + <div class="flexchild">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +#### Flexible children in vertical layouts + +The same rules can be used for children in vertical layouts. + +**Example: classes** +```html +<div class="vertical layout" style="height:250px"> + <div>Alpha</div> + <div class="flex">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-vertical); + } + .flexchild { + @apply(--layout-flex); + } +</style> + +<div class="container" style="height: 250px"> + <div>One</div> + <div class="flexchild">Two</div> + <div>Three</div> +</div> +``` + +> **Note**: for vertical layouts, the container needs to have a height for the +children to flex correctly. + +#### Flex ratios + +Children elements can be told to take up more space by including a "flex ratio" +from 1 to 12. This is equivalent to specifying the CSS `flex-grow` property. + +For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use +`flex-2` and `flex-3`, respectively. + +The classes listed here are included in the `iron-flex-factors` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="horizontal layout demo"> + <div class="flex-3">Alpha</div> + <div class="flex">Beta</div> + <div class="flex-2">Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex) + } + .flex2child { + @apply(--layout-flex-2); + } + .flex3child { + @apply(--layout-flex-3); + } +</style> + +<div class="container"> + <div class="flex3child">One</div> + <div class="flexchild">Two</div> + <div class="flex2child">Three</div> +</div> +``` + +### Cross-axis alignment + +By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout). + +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout" style="height: 154px"> + <div>Stretch Fill</div> +</div> +``` + +Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout) +by adding the `center` class or applying the `--layout-center` mixin. + +**Example: classes, cross-axis center** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout center" style="height: 154px"> + <div>Center</div> +</div> +``` + +**Example: mixins, cross-axis center** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + height: 154px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-center); + } +</style> + +<div class="container" style="height: 154px"> + <div>Center</div> +</div> +``` + +You can also position at the top/bottom (or left/right in `vertical` layouts) using the `start` or `end` +classes, or by applying the `--layout-start` or `--layout-end` mixins. + + +**Example: classes, cross-axis start** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout start" style="height: 154px"> + <div>start</div> +</div> +``` + +**Example: mixins, cross-axis start** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-start); + } +</style> + +<div class="container" style="height: 154px"> + <div>start</div> +</div> +``` + +**Example: classes, cross-axis end** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout end" style="height: 154px"> + <div>end</div> +</div> +``` + +**Example: mixins, cross-axis end** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-end); + } +</style> + +<div class="container" style="height: 154px"> + <div>end</div> +</div> +``` + +### Justification + +Justifying aligns contents along the **main axis**. Justify the layout +by specifying one of the following. + + +Class | Mixin | Result +:-|:-|:- +`start-justified`| <code>--layout-start-justified</code> | Aligns contents at the start of the main axis. +`center-justified` | <code>--layout-center-justified</code> | Centers contents along the main axis. +`end-justified` | <code>--layout-end-justified</code> | Aligns contents to the end of the main axis. +`justified` | <code>--layout-justified</code> | Aligns contents with equal spaces between children. +`around-justified` | <code>--layout-around-justified</code> | Aligns contents with equal spaces arround children. + +The classes listed here are included in the `iron-flex-alignment` module of the `iron-flex-layout-classes` file. + +**Example: classes, start justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal start-justified layout"> + <div>start-justified</div> +</div> +``` + +**Example: mixins, center justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-center-justified); + } +</style> + +<div class="container"> + <div>center-justified</div> +</div> +``` + +**Example: classes, end justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal end-justified layout"> + <div>end-justified</div> +</div> +``` + +**Example: mixins, equal space between elements** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-justified); + } +</style> + +<div class="container"> + <div>justified</div> + <div>justified</div> + <div>justified</div> +</div> +``` + +**Example: classes, equal space around each element** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal around-justified layout"> + <div>around-justified</div> + <div>around-justified</div> +</div> +``` + +## Self alignment + +Alignment can also be set per-child (instead of using the layout container's rules). + +Class | Mixin | Result +:-|:-|:- +`self-start`| <code>--layout-self-start</code> | Aligns the child at the start of the cross-axis. +`self-center` | <code>--layout-self-center</code> | Centers the child along the cross-axis. +`self-end` | <code>--layout-self-end</code> | Aligns the child at the end of the cross-axis. +`self-stretch` | <code>--layout-self-stretch</code> | Stretches the child to fit the cross-axis. + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout" style="height: 120px;"> + <div class="flex self-start">Alpha</div> + <div class="flex self-center">Beta</div> + <div class="flex self-end">Gamma</div> + <div class="flex self-stretch">Delta</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-justified); + height: 120px; + } + .container div { + @apply(--layout-flex); + } + .child1 { + @apply(--layout-self-start); + } + .child2 { + @apply(--layout-self-center); + } + .child3 { + @apply(--layout-self-end); + } + .child4 { + @apply(--layout-self-stretch); + } +</style> +<div class="container"> + <div class="child1">Alpha</div> + <div class="child2">Beta</div> + <div class="child3">Gamma</div> + <div class="child4">Delta</div> +</div> +``` + +> <b>Note:</b> The <code>flex</code> class +(and <code>--layout-flex</code> mixin) shown in these examples is +added for the demo and not required for self-alignment. + + +## Wrapping + +Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin. + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout wrap" style="width: 220px"> + <div>Alpha</div> + <div>Beta</div> + <div>Gamma</div> + <div>Delta</div> +</div> +``` + +## Reversed layouts + +Layout direction can be mirrored using the following rules: + +Class | Mixin | Result +:-|:-|:- +<code>layout horizontal-reverse</code>| <code>--layout-horizontal-reverse</code> | Horizontal layout with children laid out in reverse order (last-to-first). +<code>layout vertical-reverse</code> | <code>--layout-vertical-reverse</code> | Vertical layout with children laid out in reverse order. +<code>layout wrap-reverse</code> | <code>--layout-wrap-reverse</code> | Wrap layout with wrapped rows placed in the reverse order (for example, in a vertical layout, the second row is placed above the first row, instead of below). + +The classes listed here are included in the `iron-flex-reverse` module of the `iron-flex-layout-classes` file. + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-reverse"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal-reverse); + } +</style> + +<div class="container"> + <div>Alpha</div> + <div>Beta</div> + <div>Gamma</div> + <div>Delta</div> +</div> +``` + +## Full bleed <body> + +It's common to want the entire `<body>` to fit to the viewport. By themselves, Polymer's layout features on +`<body>` don't achieve the result. You can make `<body>` take up the entire viewport by adding the `fullbleed` class: + +```html +<body class="fullbleed vertical layout"> + <div class="flex">Fitting a fullbleed body.</div> +</body> +``` + +This removes its margins and maximizes its height to the viewport. There is no equivalent mixin, but the same result can +be achieved in CSS very simply: +```css +body { + margin: 0; + height: 100vh; +} +``` + +This class is included in the `iron-positioning` module of the `iron-flex-layout-classes` file. + +Note that the `fullbleed` class **only works on the `<body>` tag.** This is the only rule in the +stylesheet that is scoped to a particular tag. + + +## General purpose rules + +Polymer also includes other general purpose rules for basic positioning: + +Class | Mixin | Result +:-|:-|:- +`block`| `--layout-block` | Assigns `display: block` +`invisible` | `--layout-invisible` | Assigns `visibility: hidden` +`relative` | `--layout-relative` | Assigns `position: relative` +`fit` | `--layout-fit` | Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting"). + +The classes listed here are included in the `iron-positioning` module of the `iron-flex-layout-classes` file. + +> <b>Note:</b>When using `fit` layout, the element must have an ancestor with fixed size and `position: relative` layout +to fit inside of. + + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style> + <style> + :host { + display: block; + background: #ccc; + } + + .demo { + background-color: white; + margin: 12px; + padding: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="demo">Before <span>[A Span]</span> After</div> +<div class="demo">Before <span class="block">[A Block Span]</span> After</div> +<div class="demo">Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> +<div class="relative" style="height: 100px;"> + <div class="fit" style="background-color: #000;color: white">Fit</div> +</div> +``` |