flexbox - 聚合物铁柔性布局类不起作用

标签 flexbox polymer-1.0

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

最佳答案

如果你想使用CSS类，你需要单独导入它们:

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

您所拥有的导入仅允许您访问 @apply混合。请注意，聚合物正在下降 /deep/支持他们的元素并鼓励人们使用 mixins 而不是类:https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

关于flexbox - 聚合物铁柔性布局类不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34537901/