Polymer 1.0：任何人都可以发布 Iron-flex-layout 的工作示例吗？答案

【问题标题】：Polymer 1.0: Can anybody post a working example of iron-flex-layout?Polymer 1.0：任何人都可以发布 Iron-flex-layout 的工作示例吗？
【发布时间】：2015-11-08 23:47:40
【问题描述】：

This Stack Overflow question 记录了 Polymer 1.0 中缺少 <iron-flex-layout> 元素的文档。

有人可以发布一个使用<iron-flex-layout>的工作示例吗？

【问题讨论】：

什么？为什么您发布了一个问题，其中包含指向您的另一个问题的链接，而您的答案是？
你标记为正确的
Here is a forked copy of the link in the accepted answer.

标签： polymer polymer-1.0

【解决方案1】：

了解正在发生的事情的最好方法是亲眼看看。

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

它应该可以帮助您了解事情的运作方式。

有什么例子：

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

【讨论】：

完美！那个Plunker就是我要找的！奇怪的是它在一些随机的 Plunker 上而不是在官方文档中。
我可以确认该链接仍然有效。但 Safari 尚不支持。所以用户必须使用 Chrome 才能查看。

【解决方案2】：

在 Polymer 0.5 中，布局值是属性

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

在 Polymer 1.0 中它们是类

所以第一次导入元素。然后像下面的例子一样使用它

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

该代码将为您提供一个跨越页面宽度的 div，其中 flex div 占据所有可用宽度，除了第二个 div 的内容宽度。

希望这会为您指明正确的方向。

【讨论】：