Polymer Iron Flex 布局类不起作用答案

【问题标题】：Polymer Iron Flex Layout Classes Not WorkingPolymer Iron Flex 布局类不起作用
【发布时间】：2016-01-01 02:04:03
【问题描述】：

我在网站开发过程中尝试使用 iron-flex-layout，当我花了几个小时试图让它工作但无济于事时变得非常沮丧。最终，我决定尝试一个简单的网页，看看它是否可以工作（认为它可能在我的网站中）。但是，我尝试了以下代码，但仍然无法正常工作！谁能发现我的错误？

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
        <style>
            body {
                font-weight: 300;
            }
            div {
                border: 2px solid grey;
                background-color: white;
            }
            .layout {
              margin-bottom: 20px;
              background-color: grey;
            }
            p {
              margin: 5px;
            }
        </style>

    </head>
    <body fullbleed unresolved>
        <div class="horizontal layout">
            <div><p>div</p></div>
            <div class="flex"><p>flex (horizontal layout)</p></div>
            <div><p>div</p></div>
        </div>
    </body>
</html>

Here is what the result is supposed to look like

And here is what I am getting

【问题讨论】：

标签： flexbox polymer-1.0

【解决方案1】：

如果要使用 CSS 类，需要单独导入：

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

您的导入只允许您访问 @apply 混合。请注意，Polymer 正在他们的元素中放弃对 /deep/ 的支持，并鼓励人们使用 mixins 而不是类：https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

【讨论】：

这是不正确的。摘录：“目前，布局类样式表使用 /deep/ 组合器，因此，可以跨所有本地 DOM 边界工作。因为 /deep/ 计划从影子 DOM 规范中删除，这个样式表最终将被一组替换不使用 /deep/ 的规则。发生这种情况时，需要将样式表导入到使用它的每个作用域中。”来自elements.polymer-project.org/guides/flex-layout。看起来他们会用其他东西代替 deep 的使用。
谢谢。完美运行！
在 iron-flex-layout 中没有名为 classes 的文件夹
@Marcus，我们可以在聚合物元素中使用导入链接吗？这是我的参考问题：https://stackoverflow.com/q/46826321/6191987