Angular中使用mat-grid-list时如何居中宽度受限容器且不隐藏组件

问题根因 #

你当前遇到的布局异常核心原因是mainContainer使用了行布局(fxLayout="row")，其直接子元素（顶部mat-grid-list和下方exampleDiv）会默认横向并排排列，互相抢占宽度空间，才会导致mat-grid-list被挤压消失、对齐属性不生效的问题。

修复步骤 #

1. 调整外层容器布局方向 #

将mainContainer的布局从行布局改为列布局，让两个子元素纵向排列，避免横向挤压。同时调整对齐属性实现子元素水平居中。

2. 补充必要样式 #

为宽度受限的exampleDiv补充居中相关的样式兜底，避免Flex布局未生效时的对齐异常。

3. 确认依赖导入 #

确认你已经在当前模块中导入了FlexLayoutModule，否则fxLayout相关属性不会生效。

调整后代码 #

HTML #

<!-- 把fxLayout从row改成column，fxLayoutAlign调整为对应对齐规则 -->
<div fxLayout="column" fxLayoutAlign="start center" class="mainContainer">
    <mat-grid-list cols="2" rowHeight="100px">
        <mat-grid-tile colspan="2">
            <mat-card class="titleCard"><h5>Edit - Cotswold Wildlife Park</h5></mat-card>
        </mat-grid-tile>
    </mat-grid-list>
    <div fxLayout="row" fxLayoutAlign="space-around center" class="exampleDiv">
        <!-- items to layout horizontally -->
        <div>
            <mat-grid-list cols="1" rowHeight="100px">
                <mat-grid-tile>
                    Test
                </mat-grid-tile>
            </mat-grid-list>
        </div>
        <mat-card class="exampleCard">...</mat-card>
        etc...
    </div>
</div>

CSS #

.mainContainer {
    padding: 10px;
    /* 新增高度占满视口，如果你需要垂直居中可以把高度设为100vh， fxLayoutAlign的第一个参数改成center即可 */
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.titleCard {
    text-align: center;
    width: 300px;
}

.exampleCard {
    text-align: center;
}

.exampleDiv {
    text-align: center;
    width: 80%;
    /* 兜底居中样式，Flex布局失效时也能水平居中 */
    margin: 0 auto;
}

补充说明 #

如果需要实现整个容器在页面垂直+水平都居中，只需要把mainContainer的fxLayoutAlign值改成center center即可。如果不使用Flex Layout库，直接给mainContainer加display: flex; flex-direction: column; align-items: center; min-height: 100vh;样式也能实现相同效果，不会导致mat-grid-list消失。

内容的提问来源于stack exchange，提问作者Sandip Dhillon