公告列表
公告列表
收藏
回答

弹性布局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)
请 登录 后发表内容
相关问题
相关文档
问题标签
小程序开发apicss布局flex