Angular material 如何在有棱角的材质中并排放置卡片？

我不确定是否有其他CSS干扰了我创建网站的方式，但我无法让这两张有角度的材质卡并排放置。我该怎么做

<div class="container">
          <div class="">
            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Organization</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider inset="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">

                  <label>Strategic perspective </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Strategic"></mat-slider>

                  </p>

                </div>

                <div class="col s6">

                  <label>Being a quick study </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Quick"></mat-slider>

                    <!--<input type="text" id="quick" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Quick" required />-->
                  </p>

                </div>

                <div class="col s6">

                  <label>Decisiveness</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Decisive"></mat-slider>
                    <!--<input type="text" id="decisiveness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Decisive" required />-->
                  </p>
                </div>

                <div class="col s6">

                  <label>Change management</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Change"></mat-slider>

                    <!--<input type="text" id="change" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Change" required />-->
                  </p>
                </div>

              </mat-card-content>


            </mat-card>


            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Self</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider [inset]="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">
                  <label>Taking initiative</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Taking"></mat-slider>

                    <!--<input type="text" id="taking" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Taking" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Composure </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Composure"></mat-slider>

                    <!--<input type="text" id="composure" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Composure" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Balance between personal and work life </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Balance"></mat-slider>

                    <!--<input type="text" id="balance" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Balance" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Self-awareness </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_SelfAware"></mat-slider>

                    <!--<input type="text" id="seflawareness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_SelfAware" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Career management </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Career"></mat-slider>

                    <!--<input type="text" id="career" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Career" required />-->
                  </p>
                </div>

              </mat-card-content>

            </mat-card>



          </div>

          <mat-card>
            <mat-card-header>
              <mat-card-title>Leading Others</mat-card-title>
              <mat-card-subtitle></mat-card-subtitle>
            </mat-card-header>

            <mat-divider [inset]="true"></mat-divider>

            <mat-card-content>

              <div class="col s6">

                <label>Leading employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Leading"></mat-slider>

                  <!--<input type="text" id="leading" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Leading" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Confronting problem employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--                    <input type="text" id="confront" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Confront" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Participative </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--<input type="text" id="participative" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Participative" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Building collaborative relationships </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Build"></mat-slider>

                  <!--<input type="text" id="buid" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Build" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Compassion</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Compassion"></mat-slider>

                  <!--<input type="text" id="compassion" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Compassion" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Putting people at ease</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Putting"></mat-slider>

                  <!--<input type="text" id="putting" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Putting" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Respect for differences</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Respect"></mat-slider>

                  <!--<input type="text" id="respect" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Respect" required />-->
                </p>
              </div>

            </mat-card-content>

          </mat-card>




          <mat-card>




            <mat-card-actions>

              <button type="submit" class="btn waves-effect waves-light blue darken-4"
                      [disabled]="!predictionForm.valid">
                Predict
                <i class="material-icons right">cloud</i>
              </button>

              <span class="right"></span>

              <a class="btn waves-effect waves-light right"
                 (click)="resetForm()">
                Reset
                <i class="material-icons right">clear</i>
              </a>

            </mat-card-actions>


          </mat-card>

领导机构
战略观点


快速学习


果断


变革管理


领导自我
主动


镇定


个人生活与工作生活的平衡


自我意识


职业生涯管理


领导他人
主要员工


面对问题员工


参与的


建立合作关系


同情


让人们安心


尊重差异


预测
云
重置
清楚的

mat卡显示为块，这意味着您需要向父卡或卡本身添加一些css属性。 这是使用flex box的一个基本示例：

<div style="display: flex;">
    <mat-card style="flex: 1 1 auto;">Card 1</mat-card>
    <mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>

卡1
卡2

mat卡显示为块，这意味着您需要向父卡或卡本身添加一些css属性。 这是使用flex box的一个基本示例：

<div style="display: flex;">
    <mat-card style="flex: 1 1 auto;">Card 1</mat-card>
    <mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>

卡1
卡2

谢谢。最后，我还使用了angular中的flex布局，并将其包装为fxFlex@user1828605，它适用于多张卡吗？假设我有25张卡片，我想显示5行5列。@Bigeyes，它最终会。目前，只有3张卡片。最后，我还使用了angular中的flex布局，并将其包装为fxFlex@user1828605，它适用于多张卡吗？假设我有25张卡片，我想显示5行5列。@Bigeyes，它最终会。目前，只有3张卡片