在 mat-grid-list 的 mat-grid-tile 组件中垂直堆叠 mat-checkboxes答案

【问题标题】：Stacking mat-checkboxes vertically within a mat-grid-list's mat-grid-tile component在 mat-grid-list 的 mat-grid-tile 组件中垂直堆叠 mat-checkboxes
【发布时间】：2018-12-05 13:28:55
【问题描述】：

我想要一个包含 2 列的网格列表，在这些列中我想要 2 个垂直堆叠的复选框。

我已经看到 this question 确实有点工作，但我想知道是否有更清洁的方法来解决这个问题，因为我不得不使用大量的divs 来完成这项工作....

我目前的工作方式

<mat-grid-list cols=3 rowHeight="50px">
   <mat-grid-tile class="tile">
       <div>
          <div>
            <mat-checkbox>One</mat-checkbox>
          </div>
          <div>
            <mat-checkbox>Two</mat-checkbox>
          </div>
      </div>
   </mat-grid-tile>
   ...
<mat-grid-list>

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

为外部 DIV 添加一个 flexbox 布局并摆脱内部 DIV：

<mat-grid-tile>
  <div style="display: flex; flex-direction: column;">
    <mat-checkbox>One</mat-checkbox>
    <mat-checkbox>Two</mat-checkbox>
  </div>
</mat-grid-tile>

【讨论】：