html - 在 mat-grid-list 的 mat-grid-tile 组件中垂直堆叠 mat-checkbox

Question

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

我见过 this question 这确实有点工作，但我想知道是否有一个更干净的方法来解决这个问题，因为我必须使用大量的 div 来获得这样就完成了....

我目前的工作方式

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

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