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

查看 632|回复 69
gerorge   
@MRG0 对着官网,按/查想要的 style 属性,用多了就香了
你可以复制前面那代码到 https://play.tailwindcss.com/ 去看看效果
官网 https://tailwindcss.com/docs/installation
大陆 https://www.tailwindcss.cn/docs/installation
CHTuring   
@LaGeNanRen 完全看不懂
plasticman64   
这和你什么布局都没关系,flex 也行 grid 也行,float 也行,只是对数量进行判断加 class 而已
MRG0
OP
  
应该没有 FLEX 实现不了的布局
hevi   
@hevi #59 已加入书签
pianjiao   
@MRG0 额,你还可以这么写,第二个开始,前面加个 width:100%的元素,隔开,做到换行的效果。
如果第二行开始需要两端对齐的话,那还是隔开处理吧。
```


支付方式

按钮 11111111111111

按钮 222
按钮 333
按钮 444
按钮 55555555



```
shoto   
先 js 判断返回值的列表里面按钮的长度,如果长的在上面 就洗一下数据,页面在根据 flex 获取 gird 来布局
zhw2590582   
感觉没见个看懂你需求的。 去喷你们交互设计吧。设计的什么玩艺儿。缺心眼。
长按钮一定要在第一行, 第二行要通到支付文 字下面。
我能想到的就是 数组要按字符串长度排序, 然后 flex 主轴从下向上,按钮从右下开始对齐,从右向左排,向上折行。但长按钮一定保持在第一行没想到办法。 而且如果按钮超多会盖住 支付文字。支付文字做 div 背景层处理。
b0x   
哈哈,我还是没理解你的意思
MRG0
OP
  
1. 通过 js, 根据按钮的内容长度对按钮的顺序进行排序, 从而决定哪个按钮出现在第一排.
2. 剩下的事情 css 的 flex 搞定即可.
另外,如果一组按钮的先后顺序是和按钮内容的长度有关,那么说明 UI 交互逻辑设计是有问题的.
您需要登录后才可以回帖 登录 | 立即注册

返回顶部