棱角材料：将内容物垂直排列在垫格砖中

Question

我使用的是角形材质，并且有一个包含两个图块的网格列表组件。问题是内容从左到右而不是从上到下排列。

<mat-grid-list cols="3" style="padding:10px">
  <mat-grid-tile colspan="1" class="mi-tile-contents-top">
    <h2 class="mi-text-header">Title</h2>
    <div>some sort of text in between</div>
    <button mat-raised-button class="mi-button">Learn More</button>
  </mat-grid-tile>
  <mat-grid-tile colspan="2"><img src="../assets/images/cg_app.png" width="100%"/></mat-grid-tile>
</mat-grid-list>

我认为div应该强制内容垂直排列，但事实并非如此。

同样，默认情况下，内容在垂直方向上居中对齐。尝试align-start也没有帮助。

似乎基本的东西正在工作，所以不确定我做错了什么。

Answer 1

它是水平的原因是因为Material库将您的标签包装mat-grid-tile在默认情况下flex具有行弹性方向的样式元素中。

如果我做对了，下面的代码应该确实想要您想要的。使用grid-list元素时，顺序很重要

<mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="1" rowspan="1">
        <h2>Title</h2>
    </mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="3">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <div>some sort of text in between</div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="1">
      <button mat-raised-button class="mi-button">Learn More</button>
    </mat-grid-tile>
</mat-grid-list>

您还可以将您的内容包装mat-grid-tile在div中：

<mat-grid-list cols="3" style="padding:10px">
    <mat-grid-tile colspan="2" >
        <div>
            <h2>Title</h2>
            <div>some sort of text in between</div>
            <button mat-raised-button class="mi-button">Learn More</button>
        </div>
    </mat-grid-tile>
    <mat-grid-tile colspan="1">
        <img src="../assets/images/cg_app.png" width="100%"/>
    </mat-grid-tile>
</mat-grid-list>