问题
Here is what I want to achieve with Polymer Elements:
Polymer Structure
The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.
I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.
Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.
I would be very thankful for a codepen (or similar) example on how code and result could look like.
Update: I found the solution here: How to control number of items per row using media queries in Flexbox?
回答1:
You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.
来源：https://stackoverflow.com/questions/34838465/polymer-1-0-responsive-columns