Question

我有一个Polymer自定义元素，它是一个页面。我使用iron-flex-layout元素来提供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。如果没有别的办法，我愿意放弃暴露这种情况的灵活性。

这在宽屏幕上给出的是两张卡片（每日和额外）并排，并且注销卡位于另外两张卡片下方。在一个非常宽的屏幕上，一切都在中心，看起来很好。

当屏幕变窄使得它比前两张卡并排更窄时，它们只是翻转，使得一个在屏幕左侧的另一个之下。不幸的是，第三张卡仍然在屏幕中央。

我想要发生的是： -

要么第三张牌可以左对齐，所以它们全部垂直排成一行，
或者，当前两个翻转为一个低于另一个时，它们在屏幕上居中对齐而不是左对齐

理想情况下，我希望在我的元素中使用媒体查询自动进行转换，但是任何其他机制（例如，作为前两个翻转或不折叠生成的某个事件）都是可能的。

如何？

Answer 1

您可以使用iron-media-query元素并将query-matches绑定到元素中的属性以及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>

我可以根据媒体查询动态更改Polymer iron-flex-layout（flexbox）

1 个答案: