css - 如何在 Polymer 中将 4 列 flexbox 布局缩小为 2 列？

Question

我有一个用 Polymer 和 flex 布局制作的仪表板，但是有一些问题。基本上我需要它有 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>

这与您的情况不完全相符，但原则是相同的。使用媒体查询来定义一个 bool 属性(在我的例子中是 wide)，可以为你的两种情况之一设置并为另一个取消设置。

在要根据宽度改变的元素上使用 wide-layour$="[[wide]]"。

使用带有 [wide-layout] 或 :not([wide-layout]) 选择器的 CSS 来定义容器如何布置其子元素。

您可以在多个级别进行操作以获得您想要的任何重新安排。