Angular素材UI連續顯示標簽內容

Question

我正在嘗試設置 Material Ui 選項卡的樣式。 我將我的代碼安排為一般顯示選項卡，在每個選項卡中，您有 3 個主要類別，其中包含屬於該類別的項目。 正如你在下面看到的，這是我想到的設計。

這就是我的代碼中的樣子。 所以 dev Ops 應該是列標題，它下面的 2 張卡片是屬於它的項目，但是它旁邊的下一列不是顯示在它下面。

這是我的代碼。 誰能向我解釋我如何讓列彼此相鄰我嘗試使用 flex-direction 行和列但沒有運氣 Html：

 <mat-tab-group>
                <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
                    <ng-template matTabContent>
                            <div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
                                <div>
                                    <h3>{{skillcolumn.subcat}}</h3>
                                    <mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
                                        <mat-card-title>{{skillcard.skill}}</mat-card-title>
                                    </mat-card>
                                </div>
                                <mat-divider [vertical]="true"></mat-divider>
                            </div>
                    </ng-template>
                </mat-tab>
            </mat-tab-group>

sccs

 .mat-tab-group {
                    margin-top: 2%;
                    margin-left: 5%;
                    width: 85%;
                    height: 100%;


                        .skills-colomn {
                            margin-top: 5%;
                            width:100%;
                            height:100%;
                            display: flex;
                            flex-direction: row;


                            .div {
                                width:50%;


                                .skill-name {
                                    width: 95px;
                                    height: 95px;
                                }
                            }

                    }

Answer 1

我發現了我的錯誤。 我需要在技能列周圍添加一個額外的外部 div，其中包含顯示 flex 行，而且我以某種方式將 div 鍵入為 class：我不敢相信我沒有早點注意到這一點！ HTML：

            <mat-tab-group>
            <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
                <ng-template matTabContent >
                    <div>
                        <div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
                            <div>
                                <h3>{{skillcolumn.subcat}}</h3>
                                <mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
                                    <mat-card-title>{{skillcard.skill}}</mat-card-title>
                                </mat-card>
                            </div>
                            <mat-divider [vertical]="true"></mat-divider>
                        </div>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

scss：

 .mat-tab-group {
                margin-top: 2%;
                margin-left: 5%;
                width: 85%;
                height: 100%;


                 div{
                     display: flex;
                     flex-direction: row;
                    .skills-colomn {

                        display: flex;
                        flex-direction: row;


                        div {

                            display: flex;
                            flex-direction: column;


                        }
                    }
                }