<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../iron-flex-layout.html">

<style is="custom-style" include="demo-pages-shared-styles">
  demo-snippet {
    --demo-snippet-demo: {
      padding: 0;
    }
  }
  .container {
    background-color: #ccc;
    padding: 5px;
    margin: 0;
  }
  .container > div {
    padding: 15px;
    margin: 5px;
    background-color: white;
    min-height: 20px;
  }

  .vertical-section-container {
    max-width: 700px
  }
</style>

</head> <body unresolved class=“fullbleed”>

<div class="vertical-section-container centered">
  <h4>Horizontal and vertical layout</h4>
  <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>

  <h4>Flexible children</h4>
  <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>

  <h4>Flexible children in vertical layouts</h4>
  <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>

  <h4>Flex ratios</h4>
  <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>

  <h4>Cross-axis stretch alignment (default)</h4>
  <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>

  <h4>Cross-axis center alignment</h4>
  <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>

  <h4>Cross-axis start alignment</h4>
  <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>

  <h4>Cross-axis end alignment</h4>
  <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>

  <h4>Justification, start justified</h4>
  <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>

  <h4>Justification, start justified</h4>
  <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>

  <h4>Justification, end justified</h4>
  <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>

  <h4>Justification, equal space between elements</h4>
  <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>

  <h4>Justification, equal space around each element</h4>
  <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>

  <h4>Self alignment</h4>
  <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>

  <h4>Wrapping</h4>
  <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>

  <h4>Reversed layouts</h4>
  <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>

  <h4>General purpose rules</h4>
  <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>