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文件。
Then simply apply the classes to any element.
然后简单地套用类的任何元素。
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
例：在主文档中使用混入
...
...
One
Two
Three
Example: using mixins in a Polymer element
例：在Polymer标签中使用混入
...
One
Two
Three
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
layout horizontal‑‑layout-horizontalHorizontal layout container.
layout vertical‑‑layout-verticalVertical layout container.
类
混入
结果
layout horizontal‑‑layout-horizontal水平布局容器。
layout vertical‑‑layout-vertical垂直布局容器。
Example: classes
例: 类
One
Two
Three
Example: mixins
例: 混合
One
Two
Three
...
Example output
One
Two
Three
Flexible children
Flexible 子内容
Children of a flex container can use flex to control their own sizing.
Flex容器的子内容可以使用flex控制自己的尺寸。
Class
Mixin
Result
flex‑‑layout-flexExpand the child to fill available space in the main axis.
flex-ratio‑‑layout-flex-ratioAssign a flex ratio of 1 to 12.
flex-none‑‑layout-flex-noneDon't flex the child.
flex-auto‑‑layout-flex-autoSets flex flex-basis to auto and flex-grow and flex-shrink to 1.
类
混入
结果
flex‑‑layout-flex展开子内容按照主轴线来填充可用空间。
flex-ratio‑‑layout-flex-ratio分配一个flex1-12比率。
flex-none‑‑layout-flex-noneDon't flex the child.
flex-auto‑‑layout-flex-autoSets flex flex-basis to auto and flex-grow and flex-shrink to 1.
Example: classes
Alpha
Beta (flex)
Gamma
Example: mixins
One
Two
Three
...
Example output
Alpha
Beta (flex)
Gamma
Flexible children in vertical layouts
The same rules can be used for children in vertical layouts.
可用于在子内容垂直布局相同的规则。
Example: classes
Alpha
Beta (flex)
Gamma
Example: mixins
One
Two
Three
...
Example output
Alpha
Beta (flex)
Gamma
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
Alpha
Beta
Gamma
Example: mixins
One
Two
Three
...
Example output
Alpha
Beta
Gamma
Cross-axis alignment
By default, children stretch to fit the cross-axis (e.g. vertical stretching in a horizontal layout).
Stretch Fill
Stretch Fill
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
Center
Example: mixins, cross-axis center
Center
...
Example output, cross-axis center
Center
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
start
Example: mixins, cross-axis start
start
...
Example output, cross-axis start
start
Example: classes, cross-axis end
end
Example: mixins, cross-axis end
end
...
Example output, cross-axis end
end
Justification
Justifying aligns contents along the main axis. Justify the layout
by specifying one of the following.
Class
Mixin
Result
start-justified‑‑layout-start-justifiedAligns contents at the start of the main axis.
center-justified‑‑layout-center-justifiedCenters contents along the main axis.
end-justified‑‑layout-end-justifiedAligns contents to the end of the main axis.
justified‑‑layout-justifiedAligns contents with equal spaces between children.
around-justified‑‑layout-around-justifiedAligns contents with equal spaces arround children.
Example: classes, start justified
start-justified
Example output, start justified
start-justified
Example: mixins, center justified
center-justified
...
Example output, center justified
center-justified
Example: classes, end justified
end-justified
Example output, end justified
end-justified
Example: mixins, equal space between elements
justified
justified
justified
...
Example output, equal space between elements
justified
justified
justified
Example: classes, equal space around each element
around-justified
around-justified
around-justified
around-justified
Self alignment
Alignment can also be set per-child (instead of using the layout container's rules).
Class
Mixin
Result
self-start‑‑layout-self-startAligns the child at the start of the cross-axis.
self-center‑‑layout-self-centerCenters the child along the cross-axis.
self-end‑‑layout-self-endAligns the child at the end of the cross-axis.
self-stretch‑‑self-stretchStretches the child to fit the cross-axis.
Example: classes
Alpha
Beta
Gamma
Delta
Example: mixins
Alpha
Beta
Gamma
Delta
...
Example output
Alpha
Beta
Gamma
Delta
Wrapping
Wrapped layouts can be enabled with the wrap class or --layout-wrap mixin.
Example: classes
Alpha
Beta
Gamma
Delta
Example output
Alpha
Beta
Gamma
Delta
Reversed layouts
Layout direction can be mirrored using the following rules:
Class
Mixin
Result
layout horizontal‑reverse‑‑layout-horizontal-reverseHorizontal layout with children laid out in reverse order (last-to-first).
layout vertical‑reverse‑‑layout-vertical-reverseVertical layout with children laid out in reverse order.
layout wrap‑reverse‑‑layout-wrap-reverseWrap 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
Alpha
Beta
Gamma
Delta
...
Example output
Alpha
Beta
Gamma
Delta
Full bleed
It's common to want the entire
fullbleed class:
Fitting a fullbleed 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
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-blockAssigns display: block
invisible--layout-invisibleAssigns visibility: hidden
relative--layout-relativeAssigns position: relative
fit--layout-fitSets position: absolute and sets top:0;right:0;bottom:0;left:0; (aka "trbl fitting").
Example: classes
Before [A Span] After
Before [A Block Span] After
Before invisible span Not displayed After invisible span
Fit
Example output
Before [A Span] After
Before [A Block Span] After
Before invisible span Not displayed After invisible span
Fit