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

[MRG0]

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

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

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

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

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

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

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

[Asakijz]

没看懂需求

[wednesdayco]

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

[pengtdyd]

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

[vitovan]

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

这行吗？

[LaGeNanRen]

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

[wednesdayco]

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

[MRG0]

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

[MRG0]

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

[MRG0]

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

[admol]

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

[MRG0]

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

[admol]

@admol 地图 => 地铁

[MRG0]

@admol #12 😰

[ZGame]

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

[wednesdayco]

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

[ZGame]

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

[sankemao]

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

[hlwjia]

嘛，写 4 个 switch case 好了

[me1onsoda]

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

[shuxhan]

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

[sgiyy]

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

[wusheng0]

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

[acvvkhalil]

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

[AndrewAdam]

理解不能 去喷交互设计师

[dudubaba]

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

[MRG0]

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

[wednesdayco]

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

[jy02534655]

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

[MRG0]

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

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

[darkengine]

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

[MRG0]

@wednesdayco #27 这也太牛了吧👍

[wednesdayco]

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

[MRG0]

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

[vitovan]

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

[RATIONALITY]

@wednesdayco #27 你舅宠他爸

[MRG0]

@vitovan #34 浮动恐怕不好搞

[MRG0]

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

[Dongpenghui]

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

[MRG0]

@Dongpenghui 👌

[mingl0280]

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

[MarkP]

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

[sgiyy]

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

[sgiyy]

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

[asdjgfr]

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

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

[asdjgfr]

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

[jiqiren]

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

[Alander]

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

从 ui 层面上看

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

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

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

[Seanfuck]

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

[MRG0]

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

[MRG0]

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

[MRG0]

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

[MRG0]

现在主要是两种方案：

[MRG0]

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

[hevi]

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

[hevi]

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

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

[MRG0]

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

[hevi]

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

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

[gerorge]

@LaGeNanRen 完全看不懂

[CHTuring]

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

[plasticman64]

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

[MRG0]

@hevi #59 已加入书签

[hevi]

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

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

[shoto]

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

[zhw2590582]

哈哈，我还是没理解你的意思

[b0x]

1. 通过 js, 根据按钮的内容长度对按钮的顺序进行排序, 从而决定哪个按钮出现在第一排.
2. 剩下的事情 css 的 flex 搞定即可.

另外,如果一组按钮的先后顺序是和按钮内容的长度有关,那么说明 UI 交互逻辑设计是有问题的.

[davin]

就是个原型图而已，设计师也不会直接这么设计的。问问你的设计师同事比较靠谱。

[RyougiShiki]

不给 27 楼点个赞吗

[MRG0]

@RyougiShiki 狠狠的赞住了

[MRG0]

@shoto 唉，无奈，但现在还是实现了，把“支付方式”一并纳入 flex 布局