systrace/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!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="../../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, center 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>
	<!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="../../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, center 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>