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

Question

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

这是我的 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

Answer 1

此 stackblitz link

中的演示

你只需要设置mat-button-toggle-group class 属性.

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

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

Answer 2

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

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

how to align elements inside div into 2-3 rows when on mobile (responsive)

css

row

alignment

responsive

angular