Polymer Iron Flex布局类不起作用

Question

Polymer Iron Flex布局类不起作用

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

Run Code Online (Sandbox Code Playgroud)

这是结果应该是什么样子

这就是我得到的

Answer 1

Mar*_*erg 5

如果要使用CSS类,则需要单独导入它们:

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

您只需要导入即可访问@applymixins.请注意,Polymer正在放弃/deep/对其元素的支持,并鼓励人们使用mixins而不是类:https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

归档时间：	9 年，10 月前
查看次数：	2974 次
最近记录：	9 年，10 月前