Polymer 1.0 - 响应式列

Question

这是我想用 Polymer Elements 实现的目标：

Polymer Structure

列的大小并不总是相同的宽度，而是相对于屏幕或 warpper-div 的大小。在示例 1 中每个为 16.66%，在示例 2 中为 33.33%，在示例 3 中应为 100%。

我需要一个响应式布局，其中 - 取决于屏幕尺寸 - 每行显示不同数量的列，并且每个列的大小都会进行调整。

有谁知道我如何使用https://elements.polymer-project.org/elements/iron-flex-layout 实现这一目标？我对如何使用flex 和layout horizontal/layout vertical 感到有些困惑。

我会非常感谢 codepen（或类似的）示例说明代码和结果的外观。

更新：我在这里找到了解决方案：How to control number of items per row using media queries in Flexbox?

Answer 1

您可以使用iron-media-query 为元素设置属性，根据该属性值将clsses 应用于HTML 元素，然后根据设置的类应用不同的CSS。