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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 531 天前的主题，其中的信息可能已经有所发展或是发生改变。

有个关键问题，第二排按钮会捅到支付方式下边

第 1 条附言 · 2023-07-13 11:30:39 +08:00

发帖的时候太着急了，补充一下：

1 ，后台会返回一个按钮数组，需要根据数组循环渲染按钮

2 ，按钮长短不一，按 UI 图来看，长的要在第一排

3 ，没有后端支持，只能前端改

4 ，第一排的按钮需要和“支付方式”对齐，第二排按钮有可能前伸到“支付方式”下边

5 ，当按钮减少为三个时，长的一个会在第一排，短的两个会在第二排，当按钮只有一个时只有第一排了

flex

按钮

交互

后台

72 条回复

Asakijz

2023-07-13 10:55:00 +08:00

没看懂需求

wednesdayco

2023-07-13 10:55:58 +08:00

能，话说你这按钮的大小不会不一致吧？

pengtdyd

2023-07-13 10:59:00 +08:00

可以，但是你能问出这个问题，我感觉你写不出来。

vitovan

2023-07-13 10:59:37 +08:00

.container {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}

这行吗？

LaGeNanRen

2023-07-13 10:59:48 +08:00

在座的各位有几个听懂他的需求和问题了：）

wednesdayco

2023-07-13 11:05:37 +08:00

@LaGeNanRen 我猜他说的是按钮数据是个数组，布局的时候分成两排。实现方式多得很

MRG0

2023-07-13 11:05:46 +08:00

@wednesdayco 不一致，有大有小，甚至顺序也有要求

MRG0

2023-07-13 11:06:53 +08:00

@pengtdyd 我想一天了，就这个按钮捅到支付方式下边这个问题，实在想不到如何解决

MRG0

2023-07-13 11:08:01 +08:00

@wednesdayco #6 分布成两排倒是好实现，但是如何让第二排按钮一直可以前伸到支付方式下边呢

admol

2023-07-13 11:09:24 +08:00

让我想到了在地图上打电话的那个，你应该先这样，再这样，然后再这样，最后再这样，不就可以了吗

MRG0

2023-07-13 11:09:35 +08:00

@vitovan 会被“支付方式”这个 div 挡住

admol

2023-07-13 11:09:44 +08:00

@admol 地图 => 地铁

MRG0

2023-07-13 11:10:38 +08:00

@admol #12 😰

ZGame

2023-07-13 11:13:22 +08:00

你要求后端返回的不同数组对应不同的 type 不就行了, 生成不同的模板组件...

wednesdayco

2023-07-13 11:13:48 +08:00

@MRG0 按钮大小不固定的话我目前只能想到把按钮单独放到一个容器里面，然后将其绝对定位覆盖在支付方式容器，第一个按钮 width100%占满换行第二排

ZGame

2023-07-13 11:14:01 +08:00

type => itemWarpperContainerOneStyle ,Two,Three........

sankemao

2023-07-13 11:14:45 +08:00

你把支付方式和按钮再用 flex 左右套下不就行了

hlwjia

2023-07-13 11:14:45 +08:00

嘛，写 4 个 switch case 好了

me1onsoda

2023-07-13 11:15:25 +08:00

这个不就是靠右，然后自动换行嘛

shuxhan

2023-07-13 11:19:47 +08:00

这应该就是个纯粹的 css 问题，但是我没太能理解 op 想要的布局到底什么，看完图我更困惑了

sgiyy

2023-07-13 11:24:14 +08:00

左右，上下布局不就好了（另外问题问得都很难理解）

wusheng0

2023-07-13 11:26:57 +08:00

四种支付方式？
第二排按钮会捅到支付方式下边，什么是捅，想象不出来，第二排按钮说的是哪个？

acvvkhalil

2023-07-13 11:26:57 +08:00

太容易了啊，怎么实现都行，你先左右，然后右边在让它换行也行，不让就第一个按钮和支付方式当行，把剩余的放下面一行不就好了

AndrewAdam

2023-07-13 11:27:48 +08:00

理解不能去喷交互设计师

dudubaba

2023-07-13 11:31:43 +08:00

简单，你猜 css 选择器 nth-child 是干嘛的

MRG0

2023-07-13 11:32:03 +08:00

@sgiyy 但是第一个图的情况如何实现呢，会被支付方式的 div 挡住

wednesdayco

2023-07-13 11:32:44 +08:00

@MRG0 https://codesandbox.io/p/sandbox/elated-kilby-5kjyv4

jy02534655

2023-07-13 11:34:25 +08:00

flex 布局实现不了的可以试试 grid 布局

MRG0

2023-07-13 11:35:08 +08:00

@dudubaba stylus 下 nth-child 选择器居然不起效，写法：

.a{
width 100%
height 102px
&:nth-child(1){
background #123456
}
}

darkengine

2023-07-13 11:35:37 +08:00

楼上老哥已经解释得很清楚了，先拆了左右两列，再在右边那一列对支付方式按钮进行布局

MRG0

2023-07-13 11:37:04 +08:00

@wednesdayco #27 这也太牛了吧👍

wednesdayco

2023-07-13 11:39:43 +08:00

@MRG0 只是个意思你可以再发散下

MRG0

2023-07-13 11:41:25 +08:00

@wednesdayco #32 多谢，心里有数了

vitovan

2023-07-13 11:46:18 +08:00

@MRG0 #11 支付方式的 z-index 放小一点，直接 float: left 可以吗？

RATIONALITY

2023-07-13 11:46:23 +08:00

@wednesdayco #27 你舅宠他爸

MRG0

2023-07-13 12:18:14 +08:00

@vitovan #34 浮动恐怕不好搞

MRG0

2023-07-13 12:20:07 +08:00

@wusheng0 图中其实是四种情况，支付方式有多少种我也未知；“捅”就是一个往前的动词，我说的太口语化了😂

Dongpenghui

2023-07-13 13:20:29 +08:00

display:grid 布局，你去研究一下

MRG0

2023-07-13 13:27:48 +08:00

@Dongpenghui 👌

mingl0280

2023-07-13 13:33:49 +08:00 via Android

横着拆也可以，两行，第一行两列，第二行 flex ，按钮 1 右对齐，剩下的想咋排咋排

MarkP

2023-07-13 13:35:01 +08:00

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

sgiyy

2023-07-13 13:50:25 +08:00

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

sgiyy

2023-07-13 13:55:24 +08:00

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

asdjgfr

2023-07-13 14:21:09 +08:00

[这样么？]( 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==)

排下序就行了。

MMDeJeVS3GtMVLeu

2023-07-13 14:25:47 +08:00

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

asdjgfr

2023-07-13 14:38:49 +08:00

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

jiqiren

2023-07-13 14:41:42 +08:00

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

Alander

2023-07-13 15:41:38 +08:00

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

从 ui 层面上看

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

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

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

Seanfuck

2023-07-13 15:42:06 +08:00

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

MRG0

2023-07-13 16:09:56 +08:00

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

MRG0

2023-07-13 16:16:01 +08:00

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

MRG0

2023-07-13 16:16:28 +08:00

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

MRG0

2023-07-13 16:16:58 +08:00

现在主要是两种方案：

MRG0

2023-07-13 16:19:51 +08:00

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

hevi

2023-07-13 16:39:51 +08:00

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

hevi

2023-07-13 16:44:50 +08:00

如果用 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>

```

MENGKE

2023-07-13 16:46:27 +08:00

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

MRG0

2023-07-13 16:48:29 +08:00

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

hevi

2023-07-13 16:51:48 +08:00

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

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

gerorge

2023-07-13 16:52:44 +08:00

@LaGeNanRen 完全看不懂

CHTuring

2023-07-13 17:00:07 +08:00

这和你什么布局都没关系，flex 也行 grid 也行，float 也行，只是对数量进行判断加 class 而已

plasticman64

2023-07-13 17:03:32 +08:00

应该没有 FLEX 实现不了的布局

MRG0

2023-07-13 17:13:07 +08:00

@hevi #59 已加入书签

hevi

2023-07-13 17:15:00 +08:00

@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>

```

pianjiao

2023-07-13 18:20:17 +08:00

先 js 判断返回值的列表里面按钮的长度，如果长的在上面就洗一下数据，页面在根据 flex 获取 gird 来布局

shoto

2023-07-13 19:33:49 +08:00 via Android

感觉没见个看懂你需求的。去喷你们交互设计吧。设计的什么玩艺儿。缺心眼。
长按钮一定要在第一行，第二行要通到支付文字下面。
我能想到的就是数组要按字符串长度排序，然后 flex 主轴从下向上，按钮从右下开始对齐，从右向左排，向上折行。但长按钮一定保持在第一行没想到办法。而且如果按钮超多会盖住支付文字。支付文字做 div 背景层处理。