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

[MRG0]

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

[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 右对齐，剩下的想咋排咋排