有人可以解释 flex-ratio 如何与 iron-flex-layout 一起使用吗？

Question

根据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>

它说 "For example, the following examples make "Gamma“比 "Beta" 大 2 倍，"Alpha" 大 3 倍，分别使用 flex-2 和 flex-3。”

我很困惑，因为正如您从图像中看到的那样，Alpha 和 Gamma 大小相同，而 Beta 正好填满了中间的 space。有人可以解释一下吗？

Answer 1

文档演示显然有错误，但之前的说明文字是正确的。要使用弹性因子（即 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

有人可以解释 flex-ratio 如何与 iron-flex-layout 一起使用吗？

Can someone explain how flex-ratio works with iron-flex-layout?

html

flexbox

polymer

polymer-1.0