Polymer

Question

我正在使用 core-scaffold 组件制作对象列表，如下所示。我的目标是在每行上放置 2 个共享 space 50% -50% 的项目。但是，水平布局无法按此比例分配 space。如何实现等间距。

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

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 > app-grid 助手 class。

1.Import app-grid-style.html 可以在 bower_components 文件夹的 app-layout 中找到。
2.Include 在自定义元素的样式部分包含="app-grid-style"。
3.And 将 class 应用程序网格添加到将保存布局的容器中。

可以在这个 Polymer link 上找到一个基本示例。 Polymer app-grid documentation

Polymer - 创建等距动态水平布局

Polymer - Creating an equally spaced, dynamic horizontal layout

html

javascript

css