2015-06-19 09:36:51 -07:00
|
|
|
<!doctype html>
|
|
|
|
|
<!--
|
|
|
|
|
@license
|
|
|
|
|
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
2015-12-14 08:43:03 -07:00
|
|
|
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
|
2015-06-19 09:36:51 -07:00
|
|
|
Code distributed by Google as part of the polymer project is also
|
2015-12-14 08:43:03 -07:00
|
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
2015-06-19 09:36:51 -07:00
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
|
2015-12-14 08:43:03 -07:00
|
|
|
<title>iron-flex-layout demo</title>
|
2015-06-19 09:36:51 -07:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
|
|
|
|
2015-12-14 08:43:03 -07:00
|
|
|
<link rel="import" href="../../paper-styles/demo-pages.html">
|
2016-02-18 11:20:10 -07:00
|
|
|
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
|
|
|
|
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
2015-12-14 08:43:03 -07:00
|
|
|
<link rel="import" href="../iron-flex-layout.html">
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<style is="custom-style" include="demo-pages-shared-styles">
|
|
|
|
|
demo-snippet {
|
|
|
|
|
--demo-snippet-demo: {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-12-14 08:43:03 -07:00
|
|
|
.container {
|
|
|
|
|
background-color: #ccc;
|
|
|
|
|
padding: 5px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
.container > div {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
min-height: 20px;
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
.vertical-section-container {
|
|
|
|
|
max-width: 700px
|
2015-12-14 08:43:03 -07:00
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
2015-12-14 08:43:03 -07:00
|
|
|
<body unresolved class="fullbleed">
|
2016-02-18 11:20:10 -07:00
|
|
|
<div class="vertical-section-container centered">
|
|
|
|
|
<h4>Horizontal and vertical layout</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Flexible children</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Flexible children in vertical layouts</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Flex ratios</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Cross-axis stretch alignment (default)</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Cross-axis center alignment</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Cross-axis start alignment</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Cross-axis end alignment</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Justification, start justified</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Justification, start justified</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Justification, end justified</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Justification, equal space between elements</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Justification, equal space around each element</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Self alignment</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Wrapping</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>Reversed layouts</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
<h4>General purpose rules</h4>
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2015-12-14 08:43:03 -07:00
|
|
|
<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>
|
2015-06-19 09:36:51 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
