Question

我有这个例子：

我想基本上将div分开，以便它们在md-grid-tile内均匀分布。我正在尝试遵循此引用：https://material.angularjs.org/latest/layout/alignment，使用：

layout="row" layout-align="space-between center"

但这不适合我。

Answer 1

您正在使用网格混合布局。要实现您的目标，请使用以下代码：

<md-grid-list md-cols="3" md-row-height="1:0.1" md-gutter="12px">
  <md-grid-tile style="background:green">
    <div>This should</div>
  </md-grid-tile>
  <md-grid-tile style="background:green">
    <div>be</div>
  </md-grid-tile>
  <md-grid-tile style="background:green">
    <div>spaced</div>
  </md-grid-tile>
</md-grid-list>

cols的数量由＆＃34; md-cols＆＃34;定义。和＃34; md-gutter＆＃34;瓷砖之间的排水沟（如果没有指定，则为1px）。然后，每个图块必须在＆＃34; md-grid-tile＆＃34;

中定义

Answer 2

我知道你在8个月前问过这个问题，但是今天我遇到了与md-grid-tile相同的问题。修改了您的codepen并添加到另一个div中以包装内容，确保指定flex =“100”。见Forked Codepen

 <md-grid-list md-cols="1" md-row-height="1:0.1" style="background:green">
    <md-grid-tile >
      <div layout="row" layout-align="space-between center"  flex="100" >
        <div >This should</div>
        <div >be</div>
        <div >spaced</div>
      </div>
    </md-grid-tile>
  </md-grid-list>

在md-grid-tile中布局对齐不适合我

2 个答案: