Polymer 我可以基于媒体查询动态更改聚合铁flex布局（flexbox）吗

我有一个聚合物自定义元素，它是一个页面。我使用iron flex布局元素来提供flexbox类。“我的页面”的内容区域包含三个纸卡元素，排列如下：-

<div class="layout vertical center">
  <div class="layout horizontal wrap">
    <paper-card class="daily layout vertical">...</paper-card>
    <paper-card class="extras layout vertical" >...</paper-card>
  </div>
  <div class="layout horizontal">
    <paper-card class="logout layout vertical">...</paper-card>
  </div>
</div>

...
...
...

纸卡元素的宽度通过css变量

--pas menu card width

显示在主题文件中，该变量当前设置为400px。如果没有其他办法，我愿意放弃揭露此事的灵活性

这在宽屏幕上显示的是并排的两张卡（每日卡和附加卡），以及位于其他两张卡下方中心的注销卡。在一个很宽的屏幕上，所有的东西都在中央，看起来很好

当屏幕变窄，以至于它比并排的前两张卡窄时，它们只是翻转，使屏幕左侧的一张卡低于另一张卡。不幸的是，第三张卡仍在屏幕中央

我希望发生的是：-

• 第三张卡中的任何一张都可以左对齐，以便它们都垂直排列在一条线上
• 或者，当前两个翻转为一个低于另一个时，它们在屏幕上的中心对齐，而不是左对齐

理想情况下，我希望在我的元素中通过媒体查询自动进行转换，但任何其他机制（如前两个翻转或取消翻转时生成的事件）都是可能的

如何使用？

您可以使用该元素，并将

查询匹配项

绑定到元素中的属性以及CSS类或属性。iron media query元素演示中的一些代码行：

<iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
<iron-media-query full query="print" query-matches="{{print}}"></iron-media-query>

<div class="item" wide-layout$="{{wide}}">
  <template is="dom-if" if="{{print}}">
  </template>
<div>

你能说得更具体一点吗？我想我有一些css使用整个属性的布局来做一些事情。我一直在使用浏览器进行实验，理想的做法是将元素上带有“wrap”类的类更改为“垂直中心”

如果查询匹配，则将属性设置为

true

/

false

。您可以使用普通的聚合数据绑定将这些属性绑定到一个类（或上面示例中的属性，如

wide layout

），并且，正如您所提到的，在CSS选择器中使用这些类来应用一个或另一个CSS规则。是的，我知道了，我想知道是什么规则。但我最终还是明白了。我可以在使用[wide layout]或：not（[wide layout]）选择的样式中应用类似@apply（--layout horizontal）的flexbox混合