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

@wednesdayco #27 饭喂到嘴边不过如此了

@MRG0 #26 那也没必要太复杂的布局，上下布局即可。第一行只有一个按钮就取数组的第一项（按钮右边，支付方式左边）；数组的剩余项再遍历成第二行。

@sgiyy #42 具体按钮放第一排第二排，你自己排下序就好了。

[这样么？]( https://play.vuejs.org/#eNqdVk+P20QU/yqvlmjsEjubXYFWJlloUQ+LoCDaG+bg2ONkdicz1sw4mxBFohJSQZQLEkVCvYBExYWKGwgk+DLNsvsteDNjJw7d9tBdadd+f37vvd/7zSRL72ZZRrOKeLE3UJmkpQZFdFUeJZxOSyE1LEGSoguZmJaVJjmsoJBiCh1M6iQ84ZngSmMMz8X0luYKhibBl6kx3NXyppR+ELy1DVWIWgc2oL4fwPAIlgkH6PVgff/BxdO/zx89WP/6/eV3/6z/fLJ+/AscwrO/fn72x9f//vDF5ePPL57cP//mp4sfH5ocB3wm0/J9wsd6gtCHWBGAFuB/kOpJNE3nfhRF2zajWcoqgvbSV1qa6vgvYjY9CGDQQgtcY66MYCRiYvxKqIGDkUiw5C3KXJZxrswfRjQUouI5jlGkTBE7yguyIkOn76t+F9S+ZVHt1wUhBNVvimOTeZUR30+zDLdZyS7QfN6FVMot946wa6749esmrMG6khDY9Kll5do0P1giKis18RMv8czqjdGO1vIhduOqR0OXNay68MmnyNWqrRpT/TifPy+aRk41HQXl+THPyby1ABgOh9DpGP7Nb1HxTFOBXFqN3qmm/pTyLuA268nqhuyOCyaENAHwujO4LCx+w2Zgn1eANsLfwUNLuojM8fGXuGVDZdxqAlf4RmCmd4N1zh9+dfntU+j8v3CkBcJTPvYP3gwixSiuNawPXI1ziGJ7vjNSSILMb5raVZI5uDu91/mDnrsY8ErAF02mJUs1wTeAwajSGpHfybCJ02Hi1SUS72j95e/nj34b9FyEi87pDDKWKoWRIzHHKLf/HYfC05Vy9BUpH6sJHfTQ2wRWbAtggcOxFFW5QcIQRmEWFkJiiD/SuFaUeQC4vkYoiQfxKVmgHz2o0DoRIFZ6wQjal3BGc7MbzK+1A29Dp7+391oHYkDFE5QZyY1k5Jjye6KMwW8Ueg0Twr45PogPR41yAwMR9vfK+Q4Gnott81tGZyEtzJDYgMHrdDBqubQNrVY7rNqsHqMNRb2KObZr3ga91soGdkR8uOE0UKZ5jkKKYc+ePDeOe7O7R75tHKNKhzY3Bi64OerWH+EaXUROFRZZxFAwMrdgIyFzImPol3PkntEcRizNTuvLTNHPEGsk9MQaxIxIPGlnMaSVFta06c1wtino5OFq1lva33MBAJrMdZgyOsYZMsI1kdtGW3Jx2aZRBLeJ5jk0i4rtuqxtbN7q2lfNd1IpTYtFiPeTxlox4Hly5fDEWJrB63paob+g4+hECY6fsrZ04plLjDIiPyzN0URNxs2dmngpQyLeszZzrXYbezYh2ekV9hOFMo7x4SOklcgZSbyNT+NGiXbu23fvID8t51TkFcPolzg/Jri6yvTowm6hcLHtVpzt9th+V8Bt3VO358iGaoYyjbo73c2N3xrefcno23YPooP6A3Hlrf4DZtbtDA==)

排下序就行了。

看看我这如何 https://codesandbox.io/p/sandbox/musing-feather-dyf4j5?file=%2Fsrc%2FApp.vue%3A11%2C12

刚才没仔细看，这个应该满足 ui 的需求了 https://codesandbox.io/s/sleepy-lumiere-28khrx?file=/src/App.vue

看懂了，但没完全懂....

这个问题简单抽象一下就好了吧？

从 ui 层面上看

就是 第一行永远存在，第二行可能不存在 判断条件是按钮个数

第一行永远只会有一个按钮，这个按钮是最长的按钮

两个 div 第一个是 flex ，第二个直接 text-align：right 就完事了

非要 flex 吗？普通方式很简单的：
先 js 排序拿出长的；
然后弄两个 div ，第一 div 放支付方式，长的按钮 float:right;
第二 div 里放剩下的按钮，也是 float:right ，div 加上 overflow

@sgiyy #42 我最开始也是这么想的，但是这样分开，在提交逻辑上就要麻烦点

@justyeh 按钮只能到“支付方式”div,不能延伸到“支付方式”下边

@asdjgfr #46 一打开，复杂度真吓到我了

现在主要是两种方案：

@MRG0 #53 1 ，使用想对布局，这样可以保留”循环数组“这一特点，就是调样式麻烦一点
2 ，数据分两行，这样布局简单，但我不敢确定能否应对后端传回来的数组里的所有情况

认同#49 ，数组第一个单独处理，二及之后 flex 完事

如果用 tailwindcss ，可以参考

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

```

先排个序，然后 flex ，然后 [支付方式] 算第一条加进去，支付方式用 justify-self: flex-start ；其他的 flex-end;

@hevi #56 如何快速入门 tailwindcss ，这些行内样式，给我整懵了

@MRG0 对着官网，按/查想要的 style 属性，用多了就香了
你可以复制前面那代码到 https://play.tailwindcss.com/ 去看看效果

官网 https://tailwindcss.com/docs/installation
大陆 https://www.tailwindcss.cn/docs/installation

@LaGeNanRen 完全看不懂