角度材料中列布局中元素的响应大小

Question

我想知道如何在角度材质的列布局中设置元素的宽度。

这是一个简单的代码：

<div class="inactive-background" flex layout="column" layout-align="start center">
  <md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin>
    <md-content layout-align="center center" layout="row">
      <span class="chrono">00:00:00</span>
    </md-content>
  </md-whiteframe>
</div>

使用此代码，跨度居中但非常小：

为了调整白框的大小，我可以简单地改变宽度属性。

<div class="inactive-background" flex layout="column" layout-align="start center">
  <md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin style="width: 600px">
    <md-content layout-align="center center" layout="row">
      <span class="chrono">00:00:00</span>
    </md-content>
  </md-whiteframe>
</div>

结果很好，但问题是白框没有响应。如果我减小浏览器的大小，白框仍然需要600px的宽度。

问题是：如何以敏感的方式做到这一点？

谢谢你 Codepen

Answer 1

我终于找到了（但不确定这是最好的解决方案）。告诉我，如果不是

诀窍是将whiteframe包装成另一个div（layout = row）并使用flex来设置大小：

http://codepen.io/anon/pen/NGgQjX?editors=110

<div class="inactive-background" flex layout="column">
  <div flex layout="row" layout-align="center start">
    <md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin flex="70">
      <md-content layout-align="center center" layout="row">
        <span class="chrono">00:00:00</span>
      </md-content>
    </md-whiteframe>
  </div>
</div>