聚合物柔性跨度不起作用

时间：2016-10-06 16:59:21

标签： polymer flexbox

我一直在尝试遵循Polymer教程here，但图标部分对我不起作用。

相关代码是

<body class="fullbleed vertical layout">
  <paper-header-panel class="flex">
    <paper-toolbar>
      <div>Header</div>
      <span class="flex"></span>
      <paper-icon-button icon="search"></paper-icon-button>
    </paper-toolbar>
    <div>Content</div>
  </paper-header-panel>
</body>

中间的弹性跨度应该将搜索图标一直推到右侧，但它对我来说根本不起作用。该图标会立即显示在文本之后，如此

enter image description here

我在Ubuntu上使用Chrome 52。我能找到的最接近问题的问题是this，但他们报告说跨度对他们有效（在Firefox 35上）。

注意，这是我的导入。我为其他纸张组件提供了大量额外的进口，但这无关紧要。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

1 个答案:

答案 0 :(得分：1)

请注意聚合物最近改变了你处理类的方式（而不是在你的css中使用@apply。）

您没有展示完整的模板，但样式标签应该包含您想要的铁弯曲部分。而不是在这里重复一遍，而不是在本文的开头。

https://elements.polymer-project.org/guides/flex-layout

但是你必须导入类而不是布局

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 并在样式表中使用适当的包含 <style include="iron-flex iron-flex-alignment">

相关问题
最新问题