让子布局项按百分比弯曲答案

【问题标题】：Getting child layout items to flex by percentage让子布局项按百分比弯曲
【发布时间】：2016-06-06 12:43:34
【问题描述】：

我正在使用 Angular Material 布局指令，但在让子项按特定百分比弯曲时遇到问题。

考虑以下

<md-card ng-app="MyApp">
  <div layout="column" layout-gt-sm="row" layout-margin layout-fill>
    <div flex-gt-sm="25">
      <label>Status</label>
      <div>Value</div>
    </div>
    <div flex>
      <label>Status</label>
      <div>Value</div>
    </div>
  </div>
</md-card>

CodePen Demo

我希望第一个孩子占据sm 断点上方屏幕上 25% 的可用空间，第二个孩子占据其余的 (75%)

但事实并非如此，但我确实发现，如果我从父级中删除 layout="column" 并且只有 layout-gt-sm="row" 那么它工作正常。

为什么它不能同时定义两个布局属性？

【问题讨论】：

标签： angularjs flexbox angular-material

【解决方案1】：

只需将layout-fill 属性添加到md-card 元素，因为您希望它占用整个可用空间。这是代码。

<md-card ng-app="MyApp" style='background-color:pink' layout-fill>
 <div layout="column" layout-gt-sm="row" layout-margin layout-fill style="background-color:red">
  <div flex-gt-sm="25" style="background-color:blue">
   <label>Status</label>
   <div>Value</div>
  </div>
  <div flex style="background-color:yellow">
   <label>Status</label>
   <div>Value</div>
  </div>
 </div>
</md-card>

这是工作示例。 http://codepen.io/next1/pen/WxQjzv

【讨论】：

但是根据flex-gt-sm="25" 属性，第一个孩子并没有占据 25%

【解决方案2】：

div 为列定义行，为行定义列，其中列垂直弯曲，行水平弯曲。如果您希望较大的显示器显示为行而较小的显示器显示为列以定义为行并使用布局换行，这也是一个好主意。此外，您必须考虑父级（md-card）如何处理元素。

我尽量远离布局填充并使用 flex="auto" 来支持 safari。我希望这有帮助。

【讨论】：

我认为您实际上没有回答我的问题？