浏览器：Firefox v35 操作系统：Linux Ubuntu 14，Polymer：v1.4
正在关注 Rob Dodson 的 Polycasts - 大多数视频都提到使用“flex”（flexbox）来实现响应式设计。然而，我很难让它发挥作用。
在下面列出的示例文件中，
- paper-header-panel 上的 flex 属性是多余的（即使没有它，元素也会拉伸 - 请注意蓝色边框
- 工具栏中 span 标签上的 flex 属性确实有效 - 请参阅“更多”图标一直滑到右侧。这很好/预期的
- 最后，我希望内容类的 div 为“flex” - 但它不会。理想情况下不应有白色区域。
文档&guide https://elements.polymer-project.org/guides/responsive-material-design-layouts没有一点帮助。即使指南上的片段也不适合我。
代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel='import' href='elements.html' />
<link rel="stylesheet" href="app.css" />
<style>
.icon-snooze {
color: red;
width: 48px;
height: 48px;
}
</style>
<style is="custom-style" include='iron-flex iron-positioning'>
body {
border: 1px dashed red;
}
paper-header-panel {
border: 2px dashed dodgerblue;
}
.content {
border: 2px dashed tomato;
background-color: var(--paper-light-blue-500);
}
</style>
</head>
<body class='fullbleed vertical layout'>
<paper-header-panel class='flex'>
<paper-toolbar>
<paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
<div>Header</div>
<span class='flex'></span>
<paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
</paper-toolbar>
<div class='content flex'>Content </div>
</paper-header-panel>
</body>
</html>
更多观察：
水平弯曲按预期工作/开箱即用。
对于垂直弯曲，如果我设置它就可以工作父级/容器的明确高度- 这有点违背了目的。
<body class='fullbleed vertical layout'>
<div class='layout vertical container' style='height:50vh;' >
<div>one</div>
<div class="flex">two (won't flex without height set)</div>
<div>three</div>
</div>
<div class='layout horizontal container'>
<div>one</div>
<div class="flex">two (will flex)</div>
<div>three</div>
</div>
</div>
iron-flex-layout一开始甚至以后可能会很难使用。
让我们分解一下如何实现所需的输出。
首先我们需要那个fullbleed身体上的阶级。这使得我们使用全尺寸的屏幕。然后我们添加<paper-header-panel>负责标题和内容的显示、定位和大小调整的元素。我们不需要添加任何类paper-header-panel.
接下来我们添加两个div元素。其他是实际的标头paper-headerclass 和 other 是内容托管者fit班级。这fit类负责确保我们的内容填满整个屏幕。
第一个 div 的内部paper-header我们按照您提供的方式在工具栏和其他内容中添加了类。这有效并且是正确的。
如果您想为您的内容使用不同的布局类型（horizontal or vertical例如）您可以使用以下命令将所需的类添加到 div 中fit class.
请参阅下面的代码。
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include='iron-flex iron-positioning'>
body {
border: 1px dashed red;
}
paper-header-panel {
border: 2px dashed dodgerblue;
}
.fit {
@apply(--iron-positoning-fit);
height: 100%;
border: 2px dashed tomato;
background-color: #00B7FF;
}
</style>
</head>
<body class='fullbleed'>
<paper-header-panel>
<div class="paper-header">
<paper-toolbar>
<paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
<div>Header</div>
<span class="flex"></span>
<paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
</paper-toolbar>
</div>
<div class="fit">
<div>Content</div>
</div>
</paper-header-panel>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
