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

Question

我想知道如何在 angular material 的列布局中设置元素的宽度。

这是一个简单的代码：

<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

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

诀窍是将白框包装到另一个 div（布局=行）并使用 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>

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

Responsive size of element in column layout in angularmaterial

css

angularjs

responsive-design

size

angular-material