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

查看 603|回复 69

2023-7-14 07:00:46

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

MRG0

2023-7-14 07:01:37

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

MRG0

2023-7-14 07:02:14

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

MRG0

2023-7-14 07:03:03

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

MRG0

2023-7-14 07:03:41

现在主要是两种方案：

hevi 2023-7-14 07:04:38

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

hevi 2023-7-14 07:05:15

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

MENGKE 2023-7-14 07:06:09

如果用 tailwindcss ，可以参考
```

支付方式

按钮 11111111111111

按钮 222
按钮 333
按钮 444
按钮 555

```

MRG0

2023-7-14 07:07:06

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

hevi 2023-7-14 07:07:53

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

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

热门主题

steam deck值得入手吗？

华为云5000元无门槛券有公司的可以试试

出OVHIE区ksle1 加拿大机房

steam上一款降价98%的游戏！

gmx的邮箱还是不错的。可以拿多种后缀，有

有没有做或者认识百度 360 搜狗推广开户的

有哪些优质的滑冰教学 UP 主？

站长们问啥赚钱？当然是游戏，ZF送饭

三只羊高层录音事件发酵，网友猜：AI管闲事

浅谈永久服务器~

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿投放广告

Yoo趣儿网站用户应遵守规则

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

热门主题

steam deck值得入手吗？

华为云5000元无门槛券有公司的可以试试

出OVHIE区ksle1 加拿大机房

steam上一款降价98%的游戏！

gmx的邮箱还是不错的。可以拿多种后缀，有

有没有做或者认识百度 360 搜狗推广开户的

有哪些优质的滑冰教学 UP 主？

站长们问啥赚钱？当然是游戏，ZF送饭

三只羊高层录音事件发酵，网友猜：AI管闲事

浅谈永久服务器~

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿 投放广告

Yoo趣儿网站用户应遵守规则

在 Yoo趣儿投放广告