收藏
回答

弹性布局flex中循环出来的数据为什么不换行?


图中灰色部分是循环出来的数据,

最外层是个弹性盒子,左边也是弹性盒子,灰色区域已经设置了flex-direction: column;为啥还是水平排开呢?是否因为最外层是flex-direction: row;?

想要实现如下这样的效果怎么弄?



回答关注问题邀请回答
收藏

2 个回答

  • 小满
    小满
    2019-10-17

    页面布局结构应该是

    ul

        li

            text    input

        li

    ul

    li循环或者写死三个。

    ul 设置 flex-direction: column;

    2019-10-17
    赞同 2
    回复
  • Maverick
    Maverick
    2019-10-17

    flex换行:flex-wrap: wrap

    要实现图中效果,通常是循环表单项,表单项内再分label和input;

    而不是把所有label分一组,input分一组,循环两项

    2019-10-17
    赞同 1
    回复 10
    • Alice
      Alice
      2019-10-17
      还是不行啊o(╥﹏╥)o
      2019-10-17
      回复
    • Maverick
      Maverick
      2019-10-17回复Alice
      上代码片段
      2019-10-17
      回复
    • Alice
      Alice
      2019-10-17回复Maverick
      大概是这样的
      https://developers.weixin.qq.com/s/BNj6Mbmk7nc8
      2019-10-17
      回复
    • Alice
      Alice
      2019-10-17回复Maverick
      大神我已经解决了谢谢您嘞,wx:for写错地方了,不该写在外层view上
      2019-10-17
      回复
    • Maverick
      Maverick
      2019-10-17回复Alice
      flex-direction是指其的子元素的排列方向,不是其本身。你切换到wxml面板看看输出的结构;我猜你本意是要循环text。你把.left上的wx:for移动到text上就行了;不过还是建议你不要这样布局,这样布局后面有高度不同的项会很麻烦。最好还是循环表单项,内部再分label和input
      2019-10-17
      回复
    查看更多(5)
登录 后发表内容
问题标签