为什么聚合物的flex属性/类不工作？ [英] Why won't polymer's flex attribute/class just work?
问题描述
在下面的示例文件中，
- 纸标题面板上的flex属性是超级的（即使没有它，元素也会延伸 - 注意蓝色边框）span标签上的flex属性
- 在工具栏中工作 - 看到更多的图标scoot一直到右边。这是好的/预期的
- 最后，我希望与内容类的div'flex' - 但它不会，理想情况下应该没有白色区域。
文档和指南并没有什么帮助，即使是指南上的代码片段也不适合我。
代码如下：
更多观察：
水平弯曲按预期工作/盒子外面。
对于vertical flex，如果我在父容器或容器上设置了一个明确的高度，打破了目的。
< body class ='fullbleed vertical layout'>< div class ='layout vertical container'style ='height：50vh;'> < DIV - 酮< / DIV> < div class =flex> two（不会在没有高度设置的情况下弹出）< / div> < div> three< / div>< / div>< div class ='layout horizontal container'> < DIV - 酮< / DIV> < div class =flex> two（will flex）< / div> < / div>< / div>< / div> 。 让我们分解如何达到所需的输出。 在第一个div里面 如果你想为你的内容有不同的布局类型（ 请参阅下面的代码。 Browser: Firefox v35 OS: Linux Ubuntu 14, Polymer: v1.4 Was following Rob Dodson's polycasts - most of the videos mention using 'flex' (flexbox) to achieve responsive designs. I however have had a rough time getting it to work.. In the sample file listed below, The documentation & guide isn't helping a bit. Even the snippets on the guide are not working for me. Code follows:
More observations: For the vertical flex, it works if I set an explicit height on the parent/container - which kinda defeats the purpose.
Let's breakdown how we can achive the desired output. Inside of the first div with If you would like to have different layout type for your content ( See the code below.
这篇关于为什么聚合物的flex属性/类不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
首先我们需要 fullbleed 在身体上的类。这使得我们正在使用屏幕的全尺寸。然后，我们添加< paper-header-panel> 元素，它将负责显示，定位和调整我们的页眉和内容。我们不需要添加任何类到 paper-header-panel 。
接下来我们添加两个 div 元素。其他的是 paper-header 类的实际标题，另一个是 fit class的内容主机。 fit 类负责确保我们的内容填满整个屏幕。
paper-header 类，我们将添加到我们的工具栏和其他内容中，就像您提供的一样。这是正确的。
horizontal 或<例如code> vertical ），您可以使用 fit 类添加所需的类。
<！doctype html>< head> < meta charset =utf-8> <！----> < base href =https://polygit.org/components/>当服务器关闭时，切换为低于/高于备份<！----> < base href =https://polygit2.appspot.com/components/> < script src =webcomponentsjs / webcomponents-lite.min.js>< / script> < link rel =importhref =polymer / polymer.html> < link rel =importhref =paper-header-panel / paper-header-panel.html> < link rel =importhref =paper-toolbar / paper-toolbar.html> < link rel =importhref =paper-icon-button / paper-icon-button.html> < link rel =importhref =iron-icons / iron-icons.html> < link rel =importhref =iron-icon / iron-icon.html> < link rel =importhref =iron-flex-layout / iron-flex-layout-classes.html> < style is =custom-styleinclude ='iron-flex iron-positioning'> body {border：1px红色; } paper-header-panel {border：2px dashed dodgerblue; } .fit {@apply（ - iron-positoning-fit）;身高：100％边界：2px破碎的番茄; background-color：＃00B7FF; }< / style>< / head>< body class ='fullbleed'> <纸集管面板> < div class =paper-header> <纸工具栏> < paper-icon-button id =naviconicon =icons：menu>< / paper-icon-button> < DIV>页眉和LT; / DIV> < span class =flex>< / span> < paper-icon-button id ='morebutton'icon ='icons：more-vert'>< / paper-icon-button> < /纸张工具栏> < / DIV> < div class =fit> < DIV>内容< / DIV> < / DIV> < / paper-header-panel>< / body>
<!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>
Horizontal flex works as expected/out of the box.
<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 can be a hard one to use at the beginning and even later down the road.
First we need that fullbleed class on the body. That makes it so we are using the full size of the screen. Then we add the <paper-header-panel> element that will take care of displaying, positioning and sizing of our header and content. We don't need to add any classes to the paper-header-panel.
Next we add in two div elements. Other is the actual header with the paper-header class and other is the content host with fit class. The fit class takes care of making sure that our content fills the whole screen.paper-header class we add in our toolbar and other content just as you had provided. That works and is correct.horizontal or vertical for example) you can add the needed classess to the div with the 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>
登录 关闭
