<!DOCTYPE html>
<html>
<head>
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/all.html">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Polymer 1.0 Layout Classes</h1>
<div class="horizontal layout">
<div><p>div</p></div>
<div class="flex"><p>flex (horizontal layout)</p></div>
<div><p>div</p></div>
</div>
<div class="vertical layout" style="height:250px">
<div><p>div</p></div>
<div class="flex"><p>flex (vertical layout)</p></div>
<div><p>div</p></div>
</div>
<div class="horizontal layout">
<div class="flex-3"><p>flex three</p></div>
<div class="flex"><p>flex</p></div>
<div class="flex-2"><p>flex two</p></div>
</div>
<div class="horizontal layout" style="height:100px">
<div><p>horizontal default</p></div>
</div>
<div class="horizontal layout start" style="height:100px">
<div><p>horizontal start</p></div>
</div>
<div class="horizontal layout center" style="height:100px">
<div><p>horizontal center</p></div>
</div>
<div class="horizontal layout end" style="height:100px">
<div><p>horizontal end</p></div>
</div>
<div class="vertical layout" style="height:100px">
<div><p>vertical default</p></div>
</div>
<div class="vertical layout start" style="height:100px">
<div><p>vertical start</p></div>
</div>
<div class="vertical layout center" style="height:100px">
<div><p>vertical center</p></div>
</div>
<div class="vertical layout end" style="height:100px">
<div><p>vertical end</p></div>
</div>
<div class="horizontal layout start-justified" style="height:100px">
<div><p>horizontal start-justified</p></div>
</div>
<div class="horizontal layout center-justified" style="height:100px">
<div><p>horizontal layout center-justified</p></div>
</div>
<div class="horizontal layout end-justified" style="height:100px">
<div><p>horizontal layout end-justified</p></div>
</div>
<div class="vertical justified layout" style="height:150px">
<div><p>justified</p></div>
<div><p>justified</p></div>
<div><p>justified</p></div>
</div>
<div class="horizontal around-justified layout">
<div><p>around-justified</p></div>
<div><p>around-justified</p></div>
</div>
<div class="horizontal layout" style="height:150px">
<div class="flex self-start"><p>self-start</p></div>
<div class="flex self-center"><p>self-center</p></div>
<div class="flex self-end"><p>self-end</p></div>
<div class="flex self-stretch"><p>self-stretch</p></div>
</div>
<div class="horizontal layout wrap" style="width:150px; height:70px">
<div><p>horizontal</p></div>
<div><p>lay</p></div>
<div><p>out</p></div>
<div><p>wrap</p></div>
</div>
<div class="horizontal-reverse layout">
<div><p>horizontal</p></div>
<div><p>reverse</p></div>
<div><p>layout</p></div>
</div>
<div class="vertical-reverse layout" style="height:150px">
<div><p>vertical</p></div>
<div><p>reverse</p></div>
<div><p>layout</p></div>
</div>
</body>
</html>
#Polymer 1.0 Layout Classes
This plunks shows some examples of the layout classes from the `iron-flex-layout` stylesheet.
To use these styles locally:
1. Install the `iron-flex-layout` component:
`bower install --save PolymerElements/iron-flex-layout`
2. Add an import for `iron-flex-layout.html` on any element that used the layout attributes:
`<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">`
For more information see:
[https://elements.polymer-project.org/elements/iron-flex-layout](https://elements.polymer-project.org/elements/iron-flex-layout)
body {
font-weight: 300;
}
div {
border: 2px solid grey;
background-color: white;
}
.layout {
margin-bottom: 20px;
background-color: grey;
}
p {
margin: 5px;
}