css - angularjs material Layout, Flex and Offset

标签 css angularjs flexbox angular-material

1) 我正在尝试将子 div 拉伸(stretch)至 60% 并将其居中对齐,但它不起作用。我正在使用 flex 将 div 的大小拉伸(stretch)到 60%。参见示例 http://plnkr.co/edit/eaLjJDbjL1KnOI4jLYyO?p=preview

<div layout="column" layout-align="center">
<div style="background-color:#00A000;height: 40px;" flex="60">

</div>

<div style="background-color:#004444;height: 40px;" flex="60">

</div>

<div style="background-color:#0077b3;height: 40px;" flex="60">

</div>

2) Angularjs Material 文档中提到“要自定义布局中元素的大小和位置,使用 flex、offset 和 flex-order 属性”,我没有看到偏移的示例。

最佳答案

这是你需要做的..

<div layout="column" layout-align="center">
    <div layout="row" layout-align="center center">
      <div style="background-color:#00A000;height: 40px;" flex="60">
      </div>  
    </div>
    <div layout="row" layout-align="center center">
      <div style="background-color:#004444;height: 40px;" flex="60">
      </div>
    </div>
    <div layout="row" layout-align="center center">
      <div style="background-color:#0077b3;height: 40px;" flex="60">
      </div>
    </div>
</div>

阅读更多关于布局的信息 here

关于css - angularjs material Layout, Flex and Offset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29034637/

相关文章:

html - 图片按钮在 HTML5/CSS3 中不可点击

javascript - AngularJS 中的固定头表

html - 从包装中排除第一个 flex 元素

javascript - 我怎样才能安排一个字段宽度相等的选择框,它在数据网格中

html - Bootstrap 3 - 行内底部对齐列

html - 无法在 Google 地球气球文本中加粗

javascript - 可滚动的 div 粘在底部,当外部 div 的大小发生变化时

data-binding - AngularJS绑定(bind),多个 Controller 通过一个服务,部分页面由php渲染

javascript - HTML 找不到我的 js 文件

html - 关闭所有其他选项卡时,正文元素不会调整大小