• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1[![Build status](https://travis-ci.org/PolymerElements/iron-flex-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-flex-layout)
2[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/iron-flex-layout)
3
4## <iron-flex-layout>
5
6The `<iron-flex-layout>` component provides simple ways to use
7[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
8also known as flexbox. This component provides two different ways to use flexbox:
9
101. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
11The layout class stylesheet provides a simple set of class-based flexbox rules, that
12let you specify layout properties directly in markup. You must include this file
13in every element that needs to use them.
14
15Sample use:
16
17<!--
18```
19<custom-element-demo>
20  <template>
21    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
22    <link rel="import" href="iron-flex-layout-classes.html">
23    <dom-module id="demo-element">
24      <template>
25        <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
26        <style>
27          .container, .layout {
28            background-color: #ccc;
29            padding: 4px;
30          }
31
32          .container div, .layout div {
33            background-color: white;
34            padding: 12px;
35            margin: 4px;
36          }
37        </style>
38        <next-code-block></next-code-block>
39      </template>
40      <script>Polymer({is: "demo-element"});</script>
41    </dom-module>
42    <demo-element></demo-element>
43  </template>
44</custom-element-demo>
45```
46-->
47```html
48<div class="layout horizontal layout-start" style="height: 154px">
49  <div>cross axis start alignment</div>
50</div>
51```
52
531. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
54The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
55
56
57
58Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
59are deprecated, and should not be used. To continue using layout properties
60directly in markup, please switch to using the new `dom-module`-based
61[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
62Please note that the new version does not use `/deep/`, and therefore requires you
63to import the `dom-modules` in every element that needs to use them.
64
65A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
66
67
68