javascript - Angular Material Flex 给出了错误的尺寸

Question

在 Angular Material 布局库中设置 flex 的某些值似乎不起作用。

这是一个非常简单的示例，展示了这种行为。如果您点击查看，您会发现某些值的大小是正确的，而其他值似乎没有任何意义。

http://codepen.io/anon/pen/RaQzxr

有人见过这个吗？

<div ng-cloak ng-app="MyApp">

  <div layout="row">
    <md-card flex="10">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 10%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="11">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 11%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="12.5">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 12.5%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="15">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 15%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="16">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 16%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="19">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 19%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="20">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 20%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
</div>

Answer 1

引用 Angular Material 网站:“布局子项的 flex 指令可以指定 0-100 之间的整数值。该元素将拉伸(stretch)到与该值匹配的可用空间的百分比。目前，flex 指令值仅限于倍数5 个、33 个或 66 个。”

https://material.angularjs.org/latest/layout/children