V 友们，这个设计能用 flex 布局实现吗，后台返回的是一个数组对象。我想在交互上方便一下，如果 flex 实现不了，有没有其他能把按钮循环出来的办法

这和你什么布局都没关系，flex 也行 grid 也行，float 也行，只是对数量进行判断加 class 而已

应该没有 FLEX 实现不了的布局

@hevi #59 已加入书签

@MRG0 额，你还可以这么写，第二个开始，前面加个 width:100%的元素，隔开，做到换行的效果。

如果第二行开始需要两端对齐的话，那还是隔开处理吧。


```
<div class="flex h-screen w-screen items-center justify-center">
<div class="w-[600px] p-8">
<div class="mb-4 flex justify-between gap-4 border p-4">
<div class="shrink-0 text-gray-600">支付方式</div>
<div class="flex-grow flex flex-wrap justify-end">
<div class="border border-blue-400 p-2 text-sm text-gray-600 mb-2">按钮 11111111111111</div>
<div class="w-full"></div>
<div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 222</div>
<div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 333</div>
<div class="border border-blue-400 p-2 text-sm text-gray-600 mr-2">按钮 444</div>
<div class="border border-blue-400 p-2 text-sm text-gray-600">按钮 55555555</div>
</div>
</div>
</div>
</div>

```

先 js 判断返回值的列表里面按钮的长度，如果长的在上面 就洗一下数据，页面在根据 flex 获取 gird 来布局

感觉没见个看懂你需求的。 去喷你们交互设计吧。设计的什么玩艺儿。缺心眼。
长按钮一定要在第一行， 第二行要通到支付文 字下面。
我能想到的就是 数组要按字符串长度排序， 然后 flex 主轴从下向上，按钮从右下开始对齐，从右向左排，向上折行。但长按钮一定保持在第一行没想到办法。 而且如果按钮超多会盖住 支付文字。支付文字做 div 背景层处理。

哈哈，我还是没理解你的意思

1. 通过 js, 根据按钮的内容长度对按钮的顺序进行排序, 从而决定哪个按钮出现在第一排.
2. 剩下的事情 css 的 flex 搞定即可.

另外,如果一组按钮的先后顺序是和按钮内容的长度有关,那么说明 UI 交互逻辑设计是有问题的.

就是个原型图而已，设计师也不会直接这么设计的。问问你的设计师同事比较靠谱。

不给 27 楼点个赞吗

@RyougiShiki 狠狠的赞住了

@shoto 唉，无奈，但现在还是实现了，把“支付方式”一并纳入 flex 布局