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

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

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

+4
source share
2 answers

The best way to find out what's going on is to see it for yourself.

This is a plnkr link for each available layout.

This should help you understand how everything should work.

Examples of what is:

 <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> 
+8
source

In Polymer 0.5, layout values ​​were attributes.

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

In Polymer 1.0, they are classes.

so the 1st import of the item. then use it as shown below.

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

this code will give you a div spanning the width of the page with a flexible div spanning the entire width, except for the width of the contents of the second div.

hope this indicates that you are in the right direction.

+2
source

All Articles