在 Angular 材质扩展面板中更改布局答案

【问题标题】：Change Layout in Angular Material Expansion Panel在 Angular 材质扩展面板中更改布局
【发布时间】：2018-01-17 05:45:51
【问题描述】：

如何将扩展面板内部的布局更改为行布局？据我所知，无论<div fxLayout="row" ... 等是什么类型，我尝试它在扩展面板内总是有一个列布局。

示例代码：

<mat-expansion-panel-header>
    <mat-panel-title>
        Skills
    </mat-panel-title>
</mat-expansion-panel-header>

    <div fxLayout="row" fxLayoutAlign="center center">
            <div>
                <p>Test</p>
            </div>
            <div>
                <p>Test</p>
            </div>
            <div>
                <p>Test</p>
            </div>
    </div>
</mat-expansion-panel>

会回来

Test
Test
Test

【问题讨论】：

你应该检查什么规则覆盖了外部 div 的样式

标签： angular layout angular-material angular-material2

【解决方案1】：

确保您已包含 flex-layout 模块 - 如果您不确定，请尝试将 fxLayout 属性替换为设置 { display: flex; 的类。 } 或者只是使用 style="display: flex;" 将其内联添加到该 div 上。 (flex-direction:row 是默认的)

【讨论】：