Polymer 1,0 - Отзывчивые колонки

Вот что я хочу достичь с полимерными элементами:Polymer 1,0 - Отзывчивые колонки

размера Колонки не всегда такие же ширины, но по отношению к экрану или warpper-сОн размеру. В примере 1 каждый из них составляет 16,66%, в примере 2 - 33,33%, в примере 3 - 100%.

Мне нужен отзывчивый макет, который зависит от размера экрана: в строке указывается другое количество столбцов, и каждый из их размеров столбцов будет скорректирован.

Кто-нибудь знает, как я могу достичь этого с помощью https://elements.polymer-project.org/elements/iron-flex-layout? Я немного озадачен тем, как работать с flex и layout horizontal/layout vertical.

Я был бы очень благодарен за пример codepen (или аналогичный) о том, как выглядит код и результат.

Update: Я нашел решение здесь: How to control number of items per row using media queries in Flexbox?

источник

2016-01-17 Johnny

Например, я попытался добавить для экрана @media и (max-width: 768px) { .flex-6 {flex: 1! Important;} } Я думал, что это перепишет 1/6 flex и сделает это 100% гибкость. Не работает ... – Johnny

Вы можете использовать iron-media-query установить свойство на элементе, применяются clsses к HTML элементов в зависимости от этого значения свойства, а затем применять различные CSS в зависимости от набора классы.

источник

2016-01-17 13:00:34

Я думаю, что примерно у меня есть идея, что вы имеете в виду, но было бы здорово, если бы кто-нибудь мог привести пример. Я думаю, вы также подразумеваете подход @apply в пользовательских стилях, которые я действительно не получил. Точнее, я понятия не имею, как установить максимальное количество столбцов в строке. – Johnny

Да '@apply()' обычно используется как «железо-flex-layout». Я знаю только, как технически реализовать то, что я объяснил выше. Тем не менее, я ничего не сделал с самой гибкой компоновкой. Вероятно, это поможет, если вы добавите конкретный код/html в свой вопрос, который показывает, что вы на самом деле пытаетесь выполнить. –

Это часть проблемы. Я сделал изображение, чтобы показать, чего я хочу достичь, потому что ни один из x решений, которые я пробовал, не срабатывал ... :( – Johnny

Polymer 1,0 - Отзывчивые колонки

ответ

Смежные вопросы