Polymer 如何嵌套聚合物布局以填充整个页面？
我试图在聚合元素中使用聚合布局，但我无法确定它们应该如何正确嵌套 我在Polymer 如何嵌套聚合物布局以填充整个页面？,polymer,flexbox,Polymer,Flexbox,我试图在聚合元素中使用聚合布局，但我无法确定它们应该如何正确嵌套 我在fullbleed上使用body-这可以正常工作（示例中为灰色区域） 然后我添加了一个聚合元素my元素（水平布局），并在其中添加了另一个自定义元素your元素（垂直布局） 元素的中间一行（“Beta-Two”）设置为flex 预期：“Beta Two”垂直扩展，以填充整个剩余空间 观察到：“Beta Two”获取高度=0（可在元素检查器中验证） 如果flex标签被移除，则“Beta-Two”以标准高度显示 如果“Beta Tw
fullbleedmy元素your元素的中间一行（“Beta-Two”）设置为flex
预期：“Beta Two”垂直扩展，以填充整个剩余空间
观察到：“Beta Two”获取高度=0（可在元素检查器中验证）
如果flex
标签被移除，则“Beta-Two”以标准高度显示
如果“Beta Two”得到一个style=“最小高度：100px”
则使用该最小高度绘制
如果“Beta Two”得到一个没有效果的style=“最小高度：100%”
许多其他帖子建议使用：host{display:block}
样式，但这在这里没有帮助（请参阅jsbin-除非我将其应用于错误的元素？）
实现这一结果的正确方法是什么
jsbin：
这就是我所期望的最终结果：
嗯，这是你想要的：@itboy通过他的编辑让我走上了正确的轨道，谢谢
因此，答案是确保布局属性位于父元素上。一种方法是在使用元素时添加它（itboy的建议），但实际上也可以在元素声明中添加它，例如：
<polymer-element name="my-element" layout horizontal noscript>
<template>
<style>
div {
background: lightgreen;
border: 1px dotted white;
}
</style>
<div>Alpha</div>
<your-element flex ></your-element>
<div>Gamma</div>
</template>
</polymer-element>
div{
背景：浅绿色；
边框：1px点白色；
}
阿尔法
伽马射线
或类似的第二个元素
<polymer-element name="your-element" layout vertical noscript>
<template>
<style>
div {
background: lightgreen;
border: 1px dotted white;
}
#beta2 {
color: red;
}
</style>
<div>Alpha Two</div>
<div flex id="beta2">Beta Two(flex)</div>
<div>Gamma Two</div>
</template>
</polymer-element>
div{
背景：浅绿色；
边框：1px点白色；
}
#β2{
颜色：红色；
}
阿尔法二号
测试版二（flex）
伽马二号
这允许在调用元素时不必给出布局属性即可调用元素：
<body fullbleed layout vertical style="background:lightgrey;">
<div style="background-color:tomato">Top Line</div>
<my-element flex ></my-element>
<div style="background-color:tomato">Bottom Line</div>
</body>
顶线
底线
警告：确保完整的元素链使用布局
属性
使用此解决方案的jsbin：
聚合物1.0解决同一问题的方案
它的工作原理是将
包装在一个自定义元素中，否则您必须将主体封装在一个额外的
中。我希望整个内容垂直扩展-如果我移除flex
标记，“Beta-Two”将可见，但它不会扩展以填充整个垂直空间。还是我误解了你的答案？PS：编辑问题以增强“垂直”部分。弹性展开元素水平而不是垂直。请在Photoshop或paint中进行设计并共享其链接。要垂直展开哪个元素？只要不是嵌套的，Flex通常会垂直展开：添加了一个关于“预期”行为的示例。本例未使用聚合物，其工作原理与预期完全相同，即最里面的元素“Beta-Two”填充使整个物体垂直扩展。