聚合物1.0 - 响应式列 [英] Polymer 1.0 - Responsive columns

问题描述

这是我想用聚合物元素达到的目的：

聚合物结构

列大小并不总是相同的宽度，但相对于屏幕或warpper-div大小。在例子1中，它是16.66％，例子2中是33.33％，例子3中是100％。

我需要一个响应式布局，其中依赖于屏幕大小 - 每行显示不同数量的列，并且每列大小都将被调整。

有谁知道我可以通过 https://elements.polymer-project.org/elements/iron-flex-layout ？我对如何使用 flex 和 layout horizo​​ntal / layout vertical 。

我会非常感谢codepen（或类似的）代码和结果的样子。

更新：我在这里找到了解决方案：

解决方案

您可以使用铁媒体查询来设置一个元素的属性，根据这个属性值将HTML应用到HTML元素，然后根据设置的类应用不同的CSS。

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?

解决方案

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.

这篇关于聚合物1.0 - 响应式列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！