Css 移动时如何将div内的元素对齐为2-3行（响应）

所以我有一个div来呈现我网站的类别。使用移动设备时，此div太长，会影响屏幕宽度。所以我想在使用mobile时将这个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>

注意：更改宽度没有帮助

图片说明：

现在在手机上看起来是这样的：

我希望它是这样的：

这个演示

您只需要设置mat按钮切换组类属性

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

---

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

您可以使用overflow:auto for.categories container

您在问题中所说的与您接受的答案不同。您是对的，但此答案为用户表达式提供了最佳结果是正确的，我已根据您在问题中提出的问题给出了我的答案：

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