有个关键问题，第二排按钮会捅到支付方式下边 
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
V 友们，这个设计能用 flex 布局实现吗，后台返回的是一个数组对象。我想在交互上方便一下，如果 flex 实现不了，有没有其他能把按钮循环出来的办法
Bologna · Jul 13, 2023 · 5907 viewsThis topic created in 1218 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jul 13, 2023
发帖的时候太着急了，补充一下：
1 ，后台会返回一个按钮数组，需要根据数组循环渲染按钮
2 ，按钮长短不一，按 UI 图来看，长的要在第一排
3 ，没有后端支持，只能前端改
4 ，第一排的按钮需要和“支付方式”对齐，第二排按钮有可能前伸到“支付方式”下边
5 ，当按钮减少为三个时，长的一个会在第一排，短的两个会在第二排，当按钮只有一个时只有第一排了
1 ，后台会返回一个按钮数组，需要根据数组循环渲染按钮
2 ，按钮长短不一，按 UI 图来看，长的要在第一排
3 ，没有后端支持，只能前端改
4 ，第一排的按钮需要和“支付方式”对齐，第二排按钮有可能前伸到“支付方式”下边
5 ，当按钮减少为三个时，长的一个会在第一排，短的两个会在第二排，当按钮只有一个时只有第一排了
 |
AsakijzJul 13, 2023
1
没看懂需求
|
 |
wednesdaycoJul 13, 2023
2
能，话说你这按钮的大小不会不一致吧？
|
 |
pengtdydJul 13, 2023
3
可以，但是你能问出这个问题，我感觉你写不出来。
|
 |
vitovanJul 13, 2023
4
.container {
display: flex; flex-direction: row-reverse; flex-wrap: wrap; } 这行吗？ |
 |
5
在座的各位有几个听懂他的需求和问题了 ：）
|
2 |
wednesdaycoJul 13, 2023
6
@LaGeNanRen 我猜他说的是按钮数据是个数组，布局的时候分成两排。 实现方式多得很
|
 |
7
@wednesdayco 不一致，有大有小，甚至顺序也有要求
|
|
9
@wednesdayco #6 分布成两排倒是好实现，但是如何让第二排按钮一直可以前伸到支付方式下边呢
|
 |
10
让我想到了在地图上打电话的那个，你应该先这样，再这样，然后再这样，最后再这样，不就可以了吗
|
 |
ZGameJul 13, 2023
14
你要求后端返回的不同数组 对应不同的 type 不就行了, 生成不同的模板组件...
|
|
wednesdaycoJul 13, 2023
15
@MRG0 按钮大小不固定的话我目前只能想到把按钮单独放到一个容器里面，然后将其绝对定位覆盖在支付方式容器，第一个按钮 width100%占满换行第二排
|
|
ZGameJul 13, 2023
16
type => itemWarpperContainerOneStyle ,Two,Three........
|
 |
sankemaoJul 13, 2023
17
你把支付方式和按钮再用 flex 左右套下不就行了
|
 |
hlwjiaJul 13, 2023
18
嘛，写 4 个 switch case 好了
|
 |
me1onsodaJul 13, 2023
19
这个不就是靠右，然后自动换行嘛
|
 |
QUC062IzY3M1Y6dgJul 13, 2023
20
这应该就是个纯粹的 css 问题，但是我没太能理解 op 想要的布局到底什么，看完图我更困惑了
|
 |
sgiyyJul 13, 2023
21
左右，上下布局不就好了（另外问题问得都很难理解）
 |
 |
wusheng0Jul 13, 2023
22
四种支付方式？
第二排按钮会捅到支付方式下边，什么是捅，想象不出来，第二排按钮说的是哪个？ |
 |
acvvkhalilJul 13, 2023
23
太容易了啊， 怎么实现都行， 你先左右， 然后右边在让它换行也行， 不让就第一个按钮和支付方式当行， 把剩余的放下面一行不就好了
|
 |
AndrewAdamJul 13, 2023
24
理解不能 去喷交互设计师
|
 |
dudubabaJul 13, 2023
25
简单，你猜 css 选择器 nth-child 是干嘛的
|
|
27
|
 |
jy02534655Jul 13, 2023
28
flex 布局实现不了的可以试试 grid 布局
|
|
29
@dudubaba stylus 下 nth-child 选择器居然不起效， 写法：
.a{ width 100% height 102px &:nth-child(1){ background #123456 } } |
 |
darkengineJul 13, 2023
30
楼上老哥已经解释得很清楚了，先拆了左右两列，再在右边那一列对支付方式按钮进行布局
|
|
31
@wednesdayco #27 这也太牛了吧👍
|
|
wednesdaycoJul 13, 2023
32
@MRG0 只是个意思 你可以再发散下
|
|
33
@wednesdayco #32 多谢，心里有数了
|
 |
35
@wednesdayco #27 你舅宠他爸
|
 |
DongpenghuiJul 13, 2023
38
display:grid 布局，你去研究一下
|
|
39
@Dongpenghui 👌
|
 |
mingl0280Jul 13, 2023 via Android
40
横着拆也可以，两行，第一行两列，第二行 flex ，按钮 1 右对齐，剩下的想咋排咋排
|
 |
MarkPJul 13, 2023
41
@wednesdayco #27 饭喂到嘴边不过如此了
|
 |
asdjgfrJul 13, 2023
44
|
 |
MMDeJeVS3GtMVLeuJul 13, 2023
45
|
|
asdjgfrJul 13, 2023
46
刚才没仔细看，这个应该满足 ui 的需求了 https://codesandbox.io/s/sleepy-lumiere-28khrx?file=/src/App.vue
|
 |
jiqirenJul 13, 2023
47
看懂了，但没完全懂....
|
 |
AlanderJul 13, 2023
48
这个问题简单抽象一下就好了吧？
从 ui 层面上看 就是 第一行永远存在，第二行可能不存在 判断条件是按钮个数 第一行永远只会有一个按钮，这个按钮是最长的按钮 两个 div 第一个是 flex ，第二个直接 text-align：right 就完事了 |
 |
SeanfuckJul 13, 2023
49
非要 flex 吗？普通方式很简单的：
先 js 排序拿出长的； 然后弄两个 div ，第一 div 放支付方式，长的按钮 float:right; 第二 div 里放剩下的按钮，也是 float:right ，div 加上 overflow |
|
53
现在主要是两种方案：
|
|
54
@MRG0 #53 1 ，使用想对布局，这样可以保留”循环数组“这一特点，就是调样式麻烦一点
2 ，数据分两行，这样布局简单，但我不敢确定能否应对后端传回来的数组里的所有情况 |
 |
heviJul 13, 2023
55
认同#49 ，数组第一个单独处理，二及之后 flex 完事
|
|
heviJul 13, 2023
56
如果用 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> ``` |
 |
57
先排个序，然后 flex ，然后 [支付方式] 算第一条加进去，支付方式用 justify-self: flex-start ；其他的 flex-end;
|
|
heviJul 13, 2023
59
@MRG0 对着官网，按/查想要的 style 属性，用多了就香了
你可以复制前面那代码到 https://play.tailwindcss.com/ 去看看效果 官网 https://tailwindcss.com/docs/installation 大陆 https://www.tailwindcss.cn/docs/installation |
 |
gerorgeJul 13, 2023
60
@LaGeNanRen 完全看不懂
|
 |
CHTuringJul 13, 2023
61
这和你什么布局都没关系，flex 也行 grid 也行，float 也行，只是对数量进行判断加 class 而已
|
 |
plasticman64Jul 13, 2023
62
应该没有 FLEX 实现不了的布局
|
|
heviJul 13, 2023
64
@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> ``` |
 |
pianjiaoJul 13, 2023
65
先 js 判断返回值的列表里面按钮的长度，如果长的在上面 就洗一下数据，页面在根据 flex 获取 gird 来布局
|
 |
shotoJul 13, 2023 via Android
66
感觉没见个看懂你需求的。 去喷你们交互设计吧。设计的什么玩艺儿。缺心眼。
长按钮一定要在第一行， 第二行要通到支付文 字下面。 我能想到的就是 数组要按字符串长度排序， 然后 flex 主轴从下向上，按钮从右下开始对齐，从右向左排，向上折行。但长按钮一定保持在第一行没想到办法。 而且如果按钮超多会盖住 支付文字。支付文字做 div 背景层处理。 |
 |
zhw2590582Jul 13, 2023
67
哈哈，我还是没理解你的意思
|
 |
b0xJul 14, 2023
68
1. 通过 js, 根据按钮的内容长度对按钮的顺序进行排序, 从而决定哪个按钮出现在第一排.
2. 剩下的事情 css 的 flex 搞定即可. 另外,如果一组按钮的先后顺序是和按钮内容的长度有关,那么说明 UI 交互逻辑设计是有问题的. |
 |
davinJul 14, 2023
69
就是个原型图而已，设计师也不会直接这么设计的。问问你的设计师同事比较靠谱。
|
 |
RyougiShikiJul 14, 2023
70
不给 27 楼点个赞吗
|
|
71
@RyougiShiki 狠狠的赞住了
|
Select Language