<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <!-- 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: 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes). The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup. 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available. @group Iron Elements @pseudoElement iron-flex-layout @demo demo/index.html --> <style> /* IE 10 support for HTML5 hidden attr */ [hidden] { display: none !important; } </style> <style is="custom-style"> :root { --layout: { display: -ms-flexbox; display: -webkit-flex; display: flex; }; --layout-inline: { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; }; --layout-horizontal: { /* @apply(--layout); */ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; }; --layout-horizontal-reverse: { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }; --layout-vertical: { /* @apply(--layout); */ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }; --layout-vertical-reverse: { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }; --layout-wrap: { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }; --layout-wrap-reverse: { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }; --layout-flex-auto: { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; }; --layout-flex-none: { -ms-flex: none; -webkit-flex: none; flex: none; }; --layout-flex: { -ms-flex: 1 1 0.000000001px; -webkit-flex: 1; flex: 1; -webkit-flex-basis: 0.000000001px; flex-basis: 0.000000001px; }; --layout-flex-2: { -ms-flex: 2; -webkit-flex: 2; flex: 2; }; --layout-flex-3: { -ms-flex: 3; -webkit-flex: 3; flex: 3; }; --layout-flex-4: { -ms-flex: 4; -webkit-flex: 4; flex: 4; }; --layout-flex-5: { -ms-flex: 5; -webkit-flex: 5; flex: 5; }; --layout-flex-6: { -ms-flex: 6; -webkit-flex: 6; flex: 6; }; --layout-flex-7: { -ms-flex: 7; -webkit-flex: 7; flex: 7; }; --layout-flex-8: { -ms-flex: 8; -webkit-flex: 8; flex: 8; }; --layout-flex-9: { -ms-flex: 9; -webkit-flex: 9; flex: 9; }; --layout-flex-10: { -ms-flex: 10; -webkit-flex: 10; flex: 10; }; --layout-flex-11: { -ms-flex: 11; -webkit-flex: 11; flex: 11; }; --layout-flex-12: { -ms-flex: 12; -webkit-flex: 12; flex: 12; }; /* alignment in cross axis */ --layout-start: { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; }; --layout-center: { -ms-flex-align: center; -webkit-align-items: center; align-items: center; }; --layout-end: { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; }; /* alignment in main axis */ --layout-start-justified: { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }; --layout-center-justified: { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }; --layout-end-justified: { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }; --layout-around-justified: { -ms-flex-pack: around; -webkit-justify-content: space-around; justify-content: space-around; }; --layout-justified: { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }; --layout-center-center: { /* @apply(--layout-center --layout-center-justified); */ -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }; /* self alignment */ --layout-self-start: { -ms-align-self: flex-start; -webkit-align-self: flex-start; align-self: flex-start; }; --layout-self-center: { -ms-align-self: center; -webkit-align-self: center; align-self: center; }; --layout-self-end: { -ms-align-self: flex-end; -webkit-align-self: flex-end; align-self: flex-end; }; --layout-self-stretch: { -ms-align-self: stretch; -webkit-align-self: stretch; align-self: stretch; }; /******************************* Other Layout *******************************/ --layout-block: { display: block; }; --layout-invisible: { visibility: hidden !important; }; --layout-relative: { position: relative; }; --layout-fit: { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }; --layout-scroll: { -webkit-overflow-scrolling: touch; overflow: auto; }; /* fixed position */ --layout-fixed-top: { position: fixed; top: 0; left: 0; right: 0; }; --layout-fixed-right: { position: fixed; top: 0; right: 0; bottom: 0; }; --layout-fixed-bottom: { position: fixed; right: 0; bottom: 0; left: 0; }; --layout-fixed-left: { position: fixed; top: 0; bottom: 0; left: 0; }; } </style>