2

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?

Community
  • 1
  • 1
Johnny
  • 103
  • 2
  • 6
  • For example, I tried to add for @media screen and (max-width: 768px) { .flex-6 {flex:1!important;} } I thought this would overwrite 1/6 flex and make it 100% flex. Didn't work... – Johnny Jan 17 '16 at 13:35

1 Answers1

0

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I think roughly I have an idea what you mean but it would be great if anyone could provide an example. I think you also mean the @apply approach in custom styles that I didn't really get. More precisely, I have no idea how to set the maximum number of columns per row. – Johnny Jan 17 '16 at 13:26
  • Yes `@apply()` is usually how `iron-flex-layout` is used. I only know how to technically implement what I explained above. I haven't done anything with flex-layout itself yet though. It probably helps if you add concrete code/html to your question that shows what you actually try to accomplish. – Günter Zöchbauer Jan 17 '16 at 13:28
  • That's part of the problem. I made the image to show what I want to accomplish because no one of the x solutions I tried did work out... :( – Johnny Jan 17 '16 at 13:42