如何在移动设备上将 div 内的元素对齐为 2-3 行响应式

如何解决如何在移动设备上将 div 内的元素对齐为 2-3 行响应式

所以我有一个 div 来呈现我网站的类别。使用移动设备时，此 div 太长并且弄乱了屏幕宽度。所以我想在使用移动设备时将这个 div 变成 2 甚至 3 行。问题的一部分是这个 div 中的元素是动态的，我不知道如何将它们完全对齐 2 行，因为它完全是动态的...

这是我的 html：

<div class="categories-container">
    <mat-button-toggle-group #group="matButtonToggleGroup" name="fontStyle" aria-label="Font Style" value={{selectedCategory}}>
        <mat-button-toggle class="categories" *ngFor="let category of categories; let i = index" (click)="selectedChanged(group.value)" value="{{category._id}}">{{category.name}}</mat-button-toggle>
    </mat-button-toggle-group>
</div>

这是我的css：

.categories-container {
    position: absolute;
    bottom: 300px;
    left: 680px;
}

@media screen and (max-width: 768px) {
    .categories-container {
        position:static;
        width: 100%;
        height: 100px;
        padding-top: 5px;
    }
}

注意：改变宽度没有帮助。

说明照片：

现在在移动设备上是这样的：https://ibb.co/0JCVDfY

我希望它是这样的：https://ibb.co/DGSmnF2

解决方法

您可以将 overflow:auto 用于 .categories-container

,

此stackblitz link中的演示

您只需要设置 mat-button-toggle-group 类属性。

mat-button-toggle-group {
   flex-wrap: wrap;
}

并根据可用宽度调整列表。一行一行。