```
**Example: using classes in a Polymer element**
```html
...
... ...
```
**Example: using mixins in a Polymer element**
```html
...
layout horizontal
| --layout-horizontal
| Horizontal layout container.
layout vertical
| --layout-vertical
| Vertical layout container.
The classes listed here are included in the `iron-flex` module of the `iron-flex-layout-classes` file.
**Example: classes**
```html
``` **Example: mixins** ```html
```
### Flexible children
Children of a flex container can use flex to control their own sizing.
Class | Mixin | Result
:-|:-|:-
flex
| --layout-flex
| Expand the child to fill available space in the main axis.
flex-ratio
| --layout-flex-ratio
| Assign a flex ratio of 1 to 12.
flex-none
| --layout-flex-none
| Don't flex the child.
flex-auto
| --layout-flex-auto
| 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
``` **Example: mixins** ```html
``` #### Flexible children in vertical layouts The same rules can be used for children in vertical layouts. **Example: classes** ```html
``` **Example: mixins** ```html
``` > **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
``` **Example: mixins** ```html
``` ### Cross-axis alignment By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout). ```html
``` 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** ```html
``` **Example: mixins, cross-axis center** ```html
``` 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** ```html
``` **Example: mixins, cross-axis start** ```html
``` **Example: classes, cross-axis end** ```html
``` **Example: mixins, cross-axis end** ```html
```
### Justification
Justifying aligns contents along the **main axis**. Justify the layout
by specifying one of the following.
Class | Mixin | Result
:-|:-|:-
`start-justified`| --layout-start-justified
| Aligns contents at the start of the main axis.
`center-justified` | --layout-center-justified
| Centers contents along the main axis.
`end-justified` | --layout-end-justified
| Aligns contents to the end of the main axis.
`justified` | --layout-justified
| Aligns contents with equal spaces between children.
`around-justified` | --layout-around-justified
| 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**
```html
``` **Example: mixins, center justified** ```html
``` **Example: classes, end justified** ```html
``` **Example: mixins, equal space between elements** ```html
``` **Example: classes, equal space around each element** ```html
```
## Self alignment
Alignment can also be set per-child (instead of using the layout container's rules).
Class | Mixin | Result
:-|:-|:-
`self-start`| --layout-self-start
| Aligns the child at the start of the cross-axis.
`self-center` | --layout-self-center
| Centers the child along the cross-axis.
`self-end` | --layout-self-end
| Aligns the child at the end of the cross-axis.
`self-stretch` | --layout-self-stretch
| Stretches the child to fit the cross-axis.
**Example: classes**
```html
``` **Example: mixins** ```html
```
> Note: The flex
class
(and --layout-flex
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**
```html
```
## Reversed layouts
Layout direction can be mirrored using the following rules:
Class | Mixin | Result
:-|:-|:-
layout horizontal-reverse
| --layout-horizontal-reverse
| Horizontal layout with children laid out in reverse order (last-to-first).
layout vertical-reverse
| --layout-vertical-reverse
| Vertical layout with children laid out in reverse order.
layout wrap-reverse
| --layout-wrap-reverse
| 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**
```html
``` ## Full bleed <body> It's common to want the entire `