Css Nativescript：如何在网格flexbox中使标签不超过其容器的宽度？

我正在用NativeScript 6.4.1和Angular 8编写一个应用程序

在我的应用程序主页上，我需要有一个按钮列表，按钮下面有一个标签

我希望保存按钮和文本的容器对于所有的按钮和文本都是相同的宽度。如果文本太长，它将转到下一行，而不是扩展父容器的大小

为此，我尝试使用FlexboxLayout，但我注意到父容器只是扩展：

我想我的布局也需要一些灵活性；可能有能力配置它的2或3列

使用GridLayout会更好吗

以下是一段代码片段：

home.html

<FlexboxLayout backgroundColor="pink" flexWrap="wrap" justifyContent="center">
    <ns-home-button *ngFor="let n of list" name="{{ n.name }}"></ns-home-button>
</FlexboxLayout>

预期结果：

当前结果：

---

有趣的是，您在演示中显示的单元格按照您的流程规范正确对齐。使用

GridLayout

是可能的，但并不理想。

GridLayout

需要对其所有行进行计数和指定，这很烦人，而且它还将强制其子级适应它，而不是基于子级展开（如

FlexboxLayout

或

StackLayout

）

取而代之的是，只需在每个项目上设置一个宽度。最简单的两种方法是包装每个元素：

或者通过修改零部件等级库：

@Input（）宽度：字符串；

...

您知道如何使按钮都成方形吗？