werunplugged/unplugged-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
06ee9615ad
unplugged-system/external/chromium-trace/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md

1266 lines
33 KiB
Markdown
Raw Normal View History

Initial commit: AOSP 14 with modifications for Unplugged OS
2025-10-06 13:59:42 +00:00
## 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 &lt;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>
```
Reference in New Issue Copy Permalink