Polymer 1.0：任何人都可以 post iron-flex-layout 的工作示例吗？

Question

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

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

Answer 1

在 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 的内容宽度之外的所有可用宽度].

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

Answer 2

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

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>

Polymer 1.0：任何人都可以 post iron-flex-layout 的工作示例吗？

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

polymer

polymer-1.0