1-4-1 Flexbox layout with iron-f
title: Flexbox layout with iron-flex-layout
summary: "Simple flexbox layout"
tags: ['beginner']
elements: ['iron-flex-layout']
updated: 2015-05-03
Overview
概叙
The iron-flex-layout component provides simple ways to use CSS flexible box layout, also known as flexbox. This component provides two different ways to use flexbox:
iron-flex-layout组件提供简单的方法去使用CSS flexible box 布局，也被称为flexbox。这个组件提供两种不同的方法来使用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.
- 布局类。布局类的样式表提供了一组简单的基于类的flexbox规则。布局类可以让你直接在标记指定布局属性。
- Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the
@applyfunction. - 自定义CSS混入。该混入样式表包括了可以使用@apply功能的CSS规则内应用自定义CSS混入。
Using the classes or CSS mixins is largely a matter of preference. The following sections discuss how to use the each of the stylesheets.
使用的类或CSS混入在很大程度上是偏好的问题。以下各节讨论如何使用每个样式表。
Note: 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 is a good primer.
注: 使用其中任何一个样式表之前，它有助于熟悉的flexbox布局的基本知识。Chris Coyier的一个完整的指南Flexbox是一个很好的引子。
Using layout classes
使用布局类
To use layout classes import the classes/iron-flex-layout file.
要使用布局类导入classes/iron-flex-layout文件。
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
Then simply apply the classes to any element.
然后简单地套用类的任何元素。
<div class="layout horizontal wrap">
Many of the layout rules involve combinations of multiple classes (such as layout horizontal wrap above).
许多布局规则涉及多个类的组合（如layout horizontal wrap以上）。
The order in which the classes are specified doesn't matter, so layout horizontal and horizontal layout are equivalent.
其中类指定无所谓的顺序，所以layout horizontal和horizontal layout是等价的。
Currently, the layout class stylesheet uses the /deep/ combinator and therefore, works across all local DOM boundaries.
目前，该布局类样式表使用了/deep/组合子，因此，可以跨所有本地DOM边界。
Because /deep/ is slated to be removed from the shadow DOM spec, this stylesheet will eventually be replaced by a set of rules that do not use /deep/. When that happens, the stylesheet will need to be imported into each scope where it's used.
由于/deep/被提名从阴影DOM规范中删除，这个样式表将最终由一组规则所取代不使用/deep/。当发生这种情况，样式表将需要导入的地方使用它的每个范围。
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.)
自定义混入可以被应用于Polymer自定义标签的样式表内，或一个custom-style样式表样式应用到主文档中。 （没有'custom-style`样式表时他们不能在主文档中应用。）
Example: using mixins in the main document
例：在主文档中使用混入
<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
例：在Polymer标签中使用混入
<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
in the Polymer developer guide.
自定义CSS属性和混入是由Polymer库提供的功能。参见Polymer开发指南中的跨范围样式。
Horizontal and vertical layout
水平和垂直布局
Create a flex container that lays out its children vertically or horizontally.
创建Flex容器将其子内容垂直或水平分布。
| 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. |
| 类 | 混入 | 结果 |
|---|---|---|
| <code>layout horizontal</code> | <code>‑‑layout-horizontal</code> | 水平布局容器。 |
| <code>layout vertical</code> | <code>‑‑layout-vertical</code> | 垂直布局容器。 |
Example: classes
例: 类
<div class="layout horizontal">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Example: mixins
例: 混合
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
}
</style>
<template>
<div class="container">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
...
Example output
<div class="layout horizontal demo">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Flexible children
Flexible 子内容
Children of a flex container can use flex to control their own sizing.
Flex容器的子内容可以使用flex控制自己的尺寸。
| 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. |
| 类 | 混入 | 结果 |
|---|---|---|
| <code>flex</code> | <code>‑‑layout-flex</code> | 展开子内容按照主轴线来填充可用空间。 |
| <code>flex-<var>ratio</var></code> | <code>‑‑layout-flex-<var>ratio</var></code> | 分配一个flex1-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. |
Example: classes
<div class="horizontal layout">
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</div>
Example: mixins
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
</style>
<template>
<div class="container">
<div>One</div>
<div class="flexchild">Two</div>
<div>Three</div>
</div>
...
Example output
<div class="horizontal layout demo">
<div>Alpha</div>
<div class="flex">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
<div class="vertical layout" style="height:250px">
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</div>
Example: mixins
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-vertical);
}
.flexchild {
@apply(--layout-flex);
}
</style>
<template>
<div class="container">
<div>One</div>
<div class="flexchild">Two</div>
<div>Three</div>
</div>
...
Example output
<div class="vertical layout demo tall">
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</div>
Note: for vertical layouts, the container needs to have a height for the children to flex correctly.
注：对于垂直布局，容器需要有一个高度为子内容正确地flex。
Flex ratios
Flex 比率
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.
Example: classes
<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
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
.flex2child {
@apply(--layout-flex-2);
}
.flex3child {
@apply(--layout-flex-3);
}
</style>
<template>
<div class="container">
<div class="flex3child">One</div>
<div class="flexchild">Two</div>
<div class="flex2child">Three</div>
</div>
...
Example output
<div class="horizontal layout demo">
<div class="flex-3">Alpha</div>
<div class="flex">Beta</div>
<div class="flex-2">Gamma</div>
</div>
<!--
### Auto-vertical
For vertical layouts, you can use the `auto-vertical` attribute
on a child element to set an automatic flex basis on that element.
Use this attribute for responsive designs if you want elements laid
out horizontally when the display is wide or vertically when narrow.
The following code uses `core-media-query` to get the screen size.
If it's smaller than 640 pixels, the layout becomes vertical and the
elements layout on a flex basis. Otherwise, the layout becomes
horizontal and the elements are laid out normally.
{% raw %}
<template is="auto-binding">
<core-media-query query="max-width: 640px"
queryMatches="{{phoneScreen}}"></core-media-query>
<div layout vertical?="{{phoneScreen}}"
horizontal?="{{!phoneScreen}}">
<div auto-vertical>Alpha</div>
<div auto-vertical>Beta</div>
<div auto-vertical>Gamma</div>
</div>
</template>
{% endraw %}
<div vertical layout class="demo" style="height:170px">
<div auto-vertical>Alpha</div>
<div auto-vertical>Beta</div>
<div auto-vertical>Gamma</div>
</div>
-->
Cross-axis alignment
By default, children stretch to fit the cross-axis (e.g. vertical stretching in a horizontal layout).
<div class="horizontal layout">
<div>Stretch Fill</div>
</div>
<div class="horizontal layout demo tall">
<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
<div class="horizontal layout center">
<div>Center</div>
</div>
Example: mixins, cross-axis center
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
@apply(--layout-center);
}
</style>
<template>
<div class="container">
<div>Center</div>
</div>
...
Example output, cross-axis center
<div class="horizontal layout center demo tall">
<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
<div class="horizontal layout start">
<div>start</div>
</div>
Example: mixins, cross-axis start
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
@apply(--layout-start);
}
</style>
<template>
<div class="container">
<div>start</div>
</div>
...
Example output, cross-axis start
<div class="horizontal layout start demo tall">
<div>start</div>
</div>
Example: classes, cross-axis end
<div class="horizontal layout end">
<div>end</div>
</div>
Example: mixins, cross-axis end
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
@apply(--layout-end);
}
</style>
<template>
<div class="container">
<div>end</div>
</div>
...
Example output, cross-axis end
<div class="horizontal layout end demo tall">
<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. |
Example: classes, start justified
<div class="horizontal start-justified layout">
<div>start-justified</div>
</div>
Example output, start justified
<div class="horizontal start-justified layout demo">
<div>start-justified</div>
</div>
Example: mixins, center justified
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
}
</style>
<template>
<div class="container">
<div>center-justified</div>
</div>
...
Example output, center justified
<div class="horizontal center-justified layout demo">
<div>center-justified</div>
</div>
Example: classes, end justified
<div class="horizontal end-justified layout">
<div>end-justified</div>
</div>
Example output, end justified
<div class="horizontal end-justified layout demo">
<div>end-justified</div>
</div>
Example: mixins, equal space between elements
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal);
@apply(--layout-justified);
}
</style>
<template>
<div class="container">
<div>justified</div>
<div>justified</div>
<div>justified</div>
</div>
...
Example output, equal space between elements
<div class="horizontal justified layout demo">
<div>justified</div>
<div>justified</div>
<div>justified</div>
</div>
Example: classes, equal space around each element
<div class="horizontal around-justified layout">
<div>around-justified</div>
<div>around-justified</div>
</div>
<div class="horizontal around-justified layout demo">
<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>‑‑self-stretch</code> | Stretches the child to fit the cross-axis. |
Example: classes
<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
<dom-module id="mixin-demo">
<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>
<template>
<div class="container">
<div class="child1">Alpha</div>
<div class="child2">Beta</div>
<div class="child3">Gamma</div>
<div class="child4">Delta</div>
</div>
...
Example output
<div class="horizontal layout demo tall">
<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>
<aside><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.</aside>
Wrapping
Wrapped layouts can be enabled with the wrap class or --layout-wrap mixin.
Example: classes
<div class="horizontal layout wrap" style="width: 220px">
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
<div>Delta</div>
</div>
Example output
<div class="horizontal layout wrap demo" 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). |
Example: mixins
<dom-module id="mixin-demo">
<style>
.container {
@apply(--layout-horizontal-reverse);
}
</style>
<template>
<div class="container">
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
<div>Delta</div>
</div>
...
Example output
<div class="horizontal-reverse layout demo">
<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:
<body class="fullbleed vertical layout">
<div 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:
body {
margin: 0;
height: 100vh;
}
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"). |
<aside><b>Note:</b>When using fit layout, the element must have an ancestor with fixed size and position: relative layout
to fit inside of.
</aside>
Example: classes
<div>Before <span>[A Span]</span> After</div>
<div>Before <span class="block">[A Block Span]</span> After</div>
<div>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>
Example output
<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;" class="demo">
<div class="fit" style="background-color: #000;color: white">Fit</div>
</div>
