聚合物熨斗Flex布局类不起作用

我在网站的开发过程中尝试使用iron-flex-layout，当我花了几个小时尝试让它工作时，变得非常沮丧，但无济于事。最后，我决定尝试一个简单的网页，看看它是否会起作用（认为这可能是我网站上的东西）。但是，我尝试了下面的代码，但仍然无法实现它！任何人都能发现我的错误？聚合物熨斗Flex布局类不起作用

<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

来源

2015-12-30 tnort173

如果你想使用的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/

来源

2015-12-30 22:11:56 Marcus

谢谢，这就是它！ – tnort173

这是不正确的。 Exerpt：“目前，布局类样式表使用/ deep/combinator，因此可用于所有本地DOM边界。因为/ deep /将从影子DOM规范中删除，所以该样式表最终将被替换为一套不使用/ deep /的规则，当这种情况发生时，样式表将需要被导入到它使用的每个范围中。“从https://elements.polymer-project.org/guides/flex-layout。看起来他们会用其他东西代替深度使用。 – Atifm

谢谢。完美的作品！ –

聚合物熨斗Flex布局类不起作用

回答

相关问题