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