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-column" *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-column {
                            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 键入为一个类！我不敢相信我没有早点注意到这一点！

HTML：

<mat-tab-group>
    <mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
        <ng-template matTabContent >
            <div>
                <div class="skills-column" *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-column {
                        display: flex;
                        flex-direction: row;

                        div {
                           
                            display: flex;
                            flex-direction: column;


                        }
                    }
                }