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

Epitouille 发表于 Dev

还

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

这是一个简单的代码：

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

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

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

<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

还

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

诀窍是将白框包装到另一个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。