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

查看 679|回复 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 实现不了，有没有其他能把按钮循环出来的办法

热门主题

周末外出，带上电脑继续更新网站

rtsp 的海康威视的视频流如何在网页上显示

请问有没有面向对象的Jscript的书？

DNS服务器配置异常，请到域名注册管理处检

这就是风口

今年域名是不是不好卖了

Linux .do 开放注册

几千元的自动扫地机是不是爆利??????

小红书老外太多了

看到一位坛友找了个比自己大2岁还带个5岁的

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿投放广告

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

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

热门主题

周末外出，带上电脑继续更新网站

rtsp 的海康威视的视频流如何在网页上显示

请问有没有面向对象的Jscript的书？

DNS服务器配置异常，请到域名注册管理处检

这就是风口

今年域名是不是不好卖了

Linux .do 开放注册

几千元的自动扫地机是不是爆利??????

小红书老外太多了

看到一位坛友找了个比自己大2岁还带个5岁的

热门板块

公告

网站帮助 - Yoo趣儿

我们的愿景

在 Yoo趣儿 投放广告

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

在 Yoo趣儿投放广告