有人能解释一下flex-ratio是如何与iron-flex-layout一起工作的吗？
有人能解释一下flex-ratio是如何与iron-flex-layout一起工作的吗？
提问于 2017-02-03 05:29:40
根据Polymer Project's Documentation on flex-layout的说法，下面的代码应该会生成下面的图像。
<div class="horizontal layout demo">
<div class="flex-3">Alpha</div>
<div class="flex">Beta</div>
<div class="flex-2">Gamma</div>
</div>
它说“例如，下面的例子使"Gamma”比"Beta“和"Alpha”放大2倍和3倍，分别使用flex-2和flex-3。“
我很困惑，因为正如您从图像中看到的，Alpha和Gamma大小相同，而Beta只是填充了两者之间的空间。有人能解释一下吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-13 09:13:13
文档演示显然有一个bug，但之前的说明文本是正确的。要使用弹性因子(即flex-2、flex-3等)，请确保在组件样式中包含iron-flex-factors style module，如下所示：
<dom-module id="x-foo">
<template>
<style include="iron-flex-factors"></style>
...容器<div>使用horizontal和layout类，这些类在iron-flex样式模块中定义，因此我们也将其包含在组件样式中：
<dom-module id="x-foo">
<template>
<style include="iron-flex-factors iron-flex"></style>
...
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo'
});
});<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style include="iron-flex iron-flex-factors">
div {
border: solid 1px blue;
}
</style>
<div class="horizontal layout">
<div class="flex-3"><p>flex-3</p></div>
<div class="flex"><p>flex</p></div>
<div class="flex-2"><p>flex-2</p></div>
</div>
</template>
</dom-module>
</body>
codepen
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42012623
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号