Css Polymer 1.0 iron flex布局仅适用于某些标签

更新：现在更新以反映以下答案

我正在做一个聚合物1.0应用程序

我正试图在屏幕的部分水平布置一些纸质工具栏。
似乎我可以让iron flex布局的@apply（--layout horizontal）处理某些元素，但不能处理其他元素

我在下面做了一个小测试来说明发生了什么。
有趣的是，如果我将--layout水平样式的内容复制到chrome开发工具中的标记中，它就会工作。如果我只是将--layout horizontal的内容复制到一个新样式中，它也可以工作

这是正在发生的事情的例子

第一个div是0.5到1.0迁移指南中的示例。
第二个div是示例，但它试图布局一个部分而不是一个跨度。
第三行是我显式复制并应用--layout水平样式的地方

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

<dom-module id="layout-test">

    <style>
        /* Example from migration guide */
        .header {
            @apply(--layout-horizontal --layout-center);
        }

        /* A hack that makes it work */
        .hack {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;

            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
        }
    </style>

    <template>

        <!-- Working example from migration guide  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <span class="name">name</span>
        </div>

        <!-- This example does not work  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>


        <!-- This hack works fine -->
        <div class="hack">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>

    </template>
</dom-module>
<script type="text/javascript">
    Polymer({
        is: 'layout-test'
    });
</script>

/*迁移指南中的示例*/
.标题{
@应用（--布局水平-布局中心）；
}
/*使它工作的黑客*/
.哈克{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-ms柔性方向：行；
-webkit柔性方向：行；
弯曲方向：行；
}
名称
名称
名称
聚合物({
是：“布局测试”
});

完整的项目可以在这里获得

谢谢，

---

Nathan

根据polymer的github（）上的第1601期，他们改变了定制CSS混搭可以传递给@apply的方式。与在单个@apply调用中链接多个mixin不同，您必须将它们分开。这意味着以下代码段：

  .header {
        @apply(--layout-horizontal --layout-center);
    }

变成：

  .header {
        @apply(--layout-horizontal);
        @apply(--layout-center);
    }

Polymer确实需要更新其网站上的文档和示例，因为这样的变化没有得到反映将导致采用Polymer的人减少