Polymer 1.0: Can anybody post a working example of iron-flex-layout?

Question

This Stack Overflow question documents the lack of documentation for the <iron-flex-layout> element in Polymer 1.0.

Can someone please post a working example of using <iron-flex-layout>?

Answer 1

The best way to know what is happening is to see it for yourself.

This is a link to a plnkr for every layout available.

It should help you get a grasp of how things are suppose to work.

Examples of what's there:

<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>

Answer 2

In Polymer 0.5 the layout values were attributes

<div horizontal layout>
  <div flex></div>
  <div></div>
</div>

In Polymer 1.0 they are classes

so 1st import the element. then use it like the below example

<div class="horizontal layout">
  <div class="flex"></div>
  <div></div>
</div>

that code would give you a div spanning the width of the page with the flex div taking up all the width available except for the width of the contents of the second div.

hope this points you in the right direction.