【发布时间】：2015-12-03 04:42:16
【问题描述】：
我正在使用 Polymer 构建一个应用程序。我正在尝试使用 iron-flex-layout 布局我的应用程序。从理论上讲，这对我来说是有意义的。但是，实际上，我似乎无法使其与嵌套元素一起使用。目前，我有以下内容：
index.html
<html>
<head>
<title>My App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/components/polymer/polymer.html">
<link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
<!-- End of Polymer -->
<link rel="import" href="app.html">
<link rel="import" href="page-home.html">
<link rel="import" href="page-login.html">
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="vertical layout">
<div><h2>Hello</h2></div>
<app-shell flex></app-shell>
</div>
</body>
</html>
上面引用的 app.html 如下所示：
app.html
<dom-module id="app-shell">
<template>
<style>
:host {
background-color:lightsalmon;
}
</style>
<!-- Determine which view to load -->
<h3>Enjoy!</h3>
<neon-animated-pages flex id="pages" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<page-home></page-home>
<page-login></page-login>
</neon-animated-pages>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'app-shell',
properties: {
selectedPageIndex: {
type: Number,
value: 0
}
}
});
</script>
而且，为了提供其中一页的示例，我有：
page-home.html
<dom-module id="page-home">
<template>
<style>
:host {
background-color:lightyellow;
}
</style>
<div class="vertical layout center-justified">
<h4>Welcome to My App!</h4|>
<h5>I hope you like it!</h5>
</div>
</template>
<script>
Polymer({
is: "page-home"
});
</script>
</dom-module>
以上代码的行为与我预期的不同。颜色与元素层次结构不一致。此外，主要内容根本没有垂直或水平居中。为了了解 Polymer Elements 的工作原理，我正在尝试创建一个如下所示的布局：
+-----------------------------------------------+
| Hello * |
+-----------------------------------------------+
| Enjoy! ** |
+-----------------------------------------------+
| |
| |
| |
| Welcome to my App! |
| I hope you like it! |
| |
| |
| |
+-----------------------------------------------+
我期待带有一颗星 (*) 的部分是浅珊瑚色。然后，有两颗星（**）的部分是淡鲑鱼。最后，应用程序的主体部分为浅黄色。然而，整个事情都是浅珊瑚。我不明白我做错了什么。 iron-flex-layout 不起作用吗？还是我在这里完全错过了什么？
更新：
下面是显示添加 mixin 的更新。即使添加了这个 mixin，我仍然在 chrome 控制台中收到错误消息：/deep/ combinator is deprecated。
<html>
<head>
<style is="custom-style">
.horizontal-layout {
@apply(--layout-horizontal);
}
</style>
</head>
<body class="fullbleed" style="background-color:lightcoral;">
<div class="horizontal-layout">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
【问题讨论】：