How can I shrink a 4-column flexbox layout to 2 columns in Polymer? - css

Question

I have a dashboard I made with Polymer and the flex layout, however there's some issues. Basically I need it to be 4 columns long, but when the screen shrinks I need it to go to 2 columns, and then finally to 1 column. (basically laptop - 4, tablet - 2, phone - 1). Right now it goes 4 to 3 to 2 to 1. How can I achieve the 4 to 2 to 1?
Here's what I currently have:
<style>
#container {
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}
</style>
and
<div id="container">
<paper-card heading="ep-gw-ops-node1">
<div class="card-content">
<paper-card heading="Temperature" id="temperature" class="blue" style="width: 275px; margin: 2px">
<div class="card-content">
<div>
<h3 id="tv_temperature" style="color:#fff; text-align: center"> 0 </h3>
</div>
<div style="" id="chart_div_0"></div>
</div>
</paper-card>
...
...
...
</paper-card>
</div>
I've attached a basic wireframe of what I am trying to accomplish.
If there is a better way to do it without paper-cards I'm more than open to suggestions.
Note* the last column will be lowered so the 'node 1' header will stretch all the way across and the columns will be the same size.

Answer 1

I do something like this
<dom-module id="my-element">
<template>
<style>
.grouph[wide-layout] {
#apply(--layout-horizontal);
#apply(--layout-wrap);
#apply(--layout-center-justified);
}
.grouph:not([wide-layout]). .groupv {
#apply(--layout-vertical);
}
</style>
<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
<div class="grouph" wide-layout$="[[wide]]">
<paper-card>...</paper-card>
<paper-card>...</paper-card>
</div>
</template>
<script>
Polymer ({
is: 'my-element'
});
</dom-module>
This doesn't match your case exactly but the principal is the same. Use a media query to define a boolean property (in my case wide) that can be set for one of your two cases and unset for the other.
Use wide-layour$="[[wide]]" on an element that you want to alter dependant on the width.
Use CSS with a selector of [wide-layout] or :not([wide-layout]) to define how a container lays out its children.
You can do it at multiple levels to get whatever re-arrangement you want.