聚合物 - 创建等间距动态水平布局

Question

我使用core-scaffold组件制作如下所示的对象列表。我的目标是在每行上放置2个项目，共享空间50％-50％。但是，水平布局无法使用此比率分配空间。我怎样才能达到相等的间距。

其次，当屏幕尺寸变小时，我希望水平布局变为垂直布局，这样，如图所示，项目不会被压缩。什么是实现动态布局的好方法？

Answer 1

使用core-media-query元素捕获响应式更改：

<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>

使用列上的flex属性获得50-50宽度。还可以使用{{phoneScreen}}（由core-media-query设置）来确定是否应该使用水平布局

<div class="row" horizontal?="{{!phoneScreen}}" layout>
   <div class="panel" flex>50%</div>
   <div class="panel" flex>50%</div>
</div>

示例：http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview

Answer 2

Polymer现在提供app-layout＆gt; app-grid helper class。

1.导入app-grid-style.html，可以在bower_components文件夹的app-layout中找到。
2.Include include =＆＃34; app-grid-style＆＃34;在自定义元素的样式部分。
3.将类app-grid添加到容纳布局的容器中。

可在此Polymer链接上找到基本示例。 Polymer app-grid documentation