Question

我在网站开发过程中尝试使用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

Answer 1

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

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

您只能通过导入访问@apply mixins。请注意，Polymer在其元素中放弃了/deep/支持，并鼓励人们使用mixins而不是类：https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

Polymer Iron Flex布局类不起作用

1 个答案: