聚合物 - 創建等距，動態水平佈局

Question

我正在使用core-scaffold組件來製作如下所示的對象列表。我的目標是在每個共享50％-50％空間的行上放置2個物品。但是，水平佈局無法用此比例分配空間。我怎樣才能達到相等的間距。其次，當屏幕尺寸變小時，我希望水平佈局變成垂直佈局，以便再次顯示圖片中的項目不被壓縮。什麼是實現動態佈局的好方法？

Answer 1

使用核心媒體查詢元素捕捉響應變化：

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

使用列上的flex屬性來獲得50-50的寬度。還可以使用{{phoneScreen}}（由核心媒體查詢設置），以確定是否應該使用水平佈局或不

<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

聚合物現在提供的應用程序佈局> app-grid助手類。

1.導入可在bower_components文件夾中的app-layout中找到的app-grid-style.html。
2.在自定義元素的樣式部分中包含include =「app-grid-style」。
3.將類app-grid添加到將容納佈局的容器。

在此Polymer鏈接上可以找到一個基本示例。 Polymer app-grid documentation