聚合物铁 Flex 布局类不工作

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 混入。请注意，Polymer 正在放弃 /deep/ 对其元素的支持，并鼓励人们使用 mixin 而不是类：https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

聚合物铁 Flex 布局类不工作

Polymer Iron Flex Layout Classes Not Working

flexbox

polymer-1.0

聚合物铁 Flex 布局 类 不工作

Polymer Iron Flex Layout Classes Not Working

flexbox

polymer-1.0

聚合物铁 Flex 布局类不工作