Angular Material Flex 给出了错误的尺寸答案

【问题标题】：Angular Material Flex gives the wrong sizeAngular Material Flex 给出了错误的尺寸
【发布时间】：2016-08-03 13:45:45
【问题描述】：

在 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>

【问题讨论】：

我处理同样的问题。如果您选中 flex=10，则插入一个类 flex-10。你检查宽度，它是 10%。 Flex-16 没有插入 16% 的宽度，所以我认为它们有一些值的类，如 12.5 20 25 33 等常见值，但缺少 16 的类，这是一个奇怪的数字，对于布局来说。不完全确定，我们需要检查源代码才能确定。

标签： javascript angularjs material-design flexbox angular-material

【解决方案1】：

来自 Angular Material 站点的引用：“布局子项的 flex 指令可以被赋予一个 0-100 之间的整数值。元素将拉伸到与该值匹配的可用空间的百分比。目前，flex 指令值限制为倍数5、33 或 66。”

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

【讨论】：

太糟糕了，它还没有更“灵活”。希望很快。