CODEWITHSUNDEEP
polymerpolymer-1.0
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Polymer 1.0: Can anybody post a working example of 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 post a working example of using <iron-flex-layout>?

Upvotes: 4

Views: 3577

Answers (2)

Brandon
Brandon

Reputation: 570

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>

Upvotes: 8

jimi dough10
jimi dough10

Reputation: 2016

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.

Upvotes: 2

Related Questions