bower_components/iron-flex-layout/demo/index.html

<!doctype html>
<!--
@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
-->
<html>
<head>
  <title>iron-flex-layout demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../paper-styles/demo-pages.html">
  <link rel="import" href="demo-snippet.html">
  <link rel="import" href="../iron-flex-layout.html">
  <style>
    .container {
      background-color: #ccc;
      padding: 5px;
      margin: 0;
    }
    .container > div {
      padding: 15px;
      margin: 5px;
      background-color: white;
      min-height: 20px;
    }
    demo-snippet {
      width: 100%;
    }
    .vertical-section {
      padding: 0 !important;
    }
  </style>
</head>
<body unresolved class="fullbleed">
  <h4>Horizontal and vertical layout</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex {
            @apply(--layout-horizontal);
          }
        </style>
        <div class="container flex">
          <div>one</div>
          <div>two</div>
          <div>three</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Flexible children</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-horizontal {
            @apply(--layout-horizontal);
          }
          .flexchild {
            @apply(--layout-flex);
          }
        </style>
        <div class="container flex-horizontal">
          <div>one</div>
          <div class="flexchild">two (flex)</div>
          <div>three</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Flexible children in vertical layouts</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-vertical {
            @apply(--layout-vertical);
            height: 220px;
          }
          .flexchild-vertical {
            @apply(--layout-flex);
          }
        </style>
        <div class="container flex-vertical">
          <div>one</div>
          <div class="flexchild-vertical">two (flex)</div>
          <div>three</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Flex ratios</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-horizontal-with-ratios {
            @apply(--layout-horizontal);
          }
          .flexchild {
            @apply(--layout-flex);
          }
          .flex2child {
            @apply(--layout-flex-2);
          }
          .flex3child {
            @apply(--layout-flex-3);
          }
        </style>
        <div class="container flex-horizontal-with-ratios">
          <div class="flex3child">one</div>
          <div class="flexchild">two</div>
          <div class="flex2child">three</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Cross-axis stretch alignment (default)</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-stretch-align {
            @apply(--layout-horizontal);
            height: 120px;
          }
        </style>
        <div class="container flex-stretch-align">
          <div>stretch</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Cross-axis center alignment</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-center-align {
            @apply(--layout-horizontal);
            @apply(--layout-center);
            height: 120px;
          }
        </style>
        <div class="container flex-center-align">
          <div>center</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Cross-axis start alignment</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-start-align {
            @apply(--layout-horizontal);
            @apply(--layout-start);
            height: 120px;
          }
        </style>
        <div class="container flex-start-align">
          <div>start</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Cross-axis end alignment</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-end-align {
            @apply(--layout-horizontal);
            @apply(--layout-end);
            height: 120px;
          }
        </style>
        <div class="container flex-end-align">
          <div>end</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Justification, start justified</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-start-justified {
            @apply(--layout-horizontal);
            @apply(--layout-start-justified);
          }
        </style>
        <div class="container flex-start-justified">
          <div>start-justified</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Justification, start justified</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-center-justified {
            @apply(--layout-horizontal);
            @apply(--layout-center-justified);
          }
        </style>
        <div class="container flex-center-justified">
          <div>center-justified</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Justification, end justified</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-end-justified {
            @apply(--layout-horizontal);
            @apply(--layout-end-justified);
          }
        </style>
        <div class="container flex-end-justified">
          <div>end-justified</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Justification, equal space between elements</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-equal-justified {
            @apply(--layout-horizontal);
            @apply(--layout-justified);
          }
        </style>
        <div class="container flex-equal-justified">
          <div>justified</div>
          <div>justified</div>
          <div>justified</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Justification, equal space around each element</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-equal-around-justified {
            @apply(--layout-horizontal);
            @apply(--layout-around-justified);
          }
        </style>
        <div class="container flex-equal-around-justified">
          <div>around-justified</div>
          <div>around-justified</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Self alignment</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-self-align {
            @apply(--layout-horizontal);
            @apply(--layout-justified);
            height: 120px;
          }
          .flex-self-align 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>
        <div class="container flex-self-align">
          <div class="child1">one</div>
          <div class="child2">two</div>
          <div class="child3">three</div>
          <div class="child4">four</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Wrapping</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-wrap {
            @apply(--layout-horizontal);
            @apply(--layout-wrap);
            width: 200px;
          }
        </style>
        <div class="container flex-wrap">
          <div>one</div>
          <div>two</div>
          <div>three</div>
          <div>four</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>Reversed layouts</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .flex-reversed {
            @apply(--layout-horizontal-reverse);
          }
        </style>
        <div class="container flex-reversed">
          <div>one</div>
          <div>two</div>
          <div>three</div>
          <div>four</div>
        </div>
      </template>
    </demo-snippet>
  </div>
  <h4>General purpose ruls</h4>
  <div class="vertical-section">
    <demo-snippet>
      <template>
        <style is="custom-style">
          .general {
            width: 100%;
          }
          .general > div {
            background-color: #ccc;
            padding: 4px;
            margin: 12px;
          }
          .block {
            @apply(--layout-block);
          }
          .invisible {
            @apply(--layout-invisible);
          }
          .relative {
            @apply(--layout-relative);
          }
          .fit {
            @apply(--layout-fit);
          }
        </style>
        <div class="general">
          <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>
        </div>
      </template>
    </demo-snippet>
  </div>
</body>
</html>