4列のフレックスボックスレイアウトをPolymerの2列に縮小するにはどうすればよいですか？

Question

私はポリマーとフレックスレイアウトで作ったダッシュボードを持っていますが、いくつか問題があります。基本的には4列にする必要がありますが、画面が縮小すると2列になり、最後に1列になる必要があります。 （基本的にラップトップ - 4、タブレット-2、電話 - 1）。今は4対3から2対1になります。どのようにして4対2対1を達成できますか？ここで

は、私が現在持っているものです。

<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> 

と

<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> 

私が達成しようとしているものの基本的なワイヤーフレームを添付しました。 ペーパーカードなしでそれを行うより良い方法があるならば、私は提案に開放しています。

注：最後の列が下がり、「ノード1」ヘッダーが完全に伸び、列のサイズが同じになります。

Answer 1

は、私は正確にあなたのケースと一致していません。この

<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> 

このような何かを行うことが、校長は同じです。メディアクエリを使用して、2つのケースのどちらか一方に設定し、他方を設定解除できるブール値プロパティ（私の場合はwide）を定義します。

幅に応じて変更する要素にwide-layour$="[[wide]]"を使用します。

セレクタで[wide-layout]または:not([wide-layout])のCSSを使用して、コンテナがどのように子をレイアウトするかを定義します。

複数のレベルで行うことができますので、どのような再配置が必要なのかを知ることができます。