收藏
回答

关于flex布局的问题,如何完成一下布局?

小白第一次做小程序,

有没有人知道如何去做可以让d向上对齐在b下边哇,

现在我大盒子(棕色)用的了display=flex,flex-wrap=wrap,

成了这个样式

-----------------------------------

最终需求:想通过循环数组让多个view达到一下布局

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

3 个回答

  • 拾柒
    拾柒
    2022-03-17

    这个https://developers.weixin.qq.com/s/uyN

    2022-03-17
    有用 1
    回复 2
    • Lik-
      Lik-
      2022-03-17
      感谢回复哦 但是我用了column-count:2之后,块的布局会全乱掉,呜呜呜,我怀疑是这个子元素继承了父元素的属性,用浮动解决了哦,感谢感谢🌹
      2022-03-17
      回复
    • Lik-
      Lik-
      2022-03-17
      感谢哦~ 我又试了试,发现开始忘记加break-inside: avoid;这个了,这个属性我去查了查,可以让容器不分页,加了这个之后,可以像瀑布流显示啦,太感谢啦😊😊😊
      2022-03-17
      回复
  • 微喵网络
    微喵网络
    2022-03-17

    你的最终需求是瀑布流,不是你一开始说的那种情况,瀑布流可以参考:https://developers.weixin.qq.com/community/develop/article/doc/000a2e9db9ca98a3c379cfa4a5d013

    2022-03-17
    有用
    回复 3
    • Lik-
      Lik-
      2022-03-17
      感谢回复😊,我阅读了下您发的这个,他实现的可能是更为复杂高度的,我这个项目只用了两个高度的view,现在用浮动解决了,您发的这个留着以后我再做高度变化更复杂的瀑布流的时候再用啦,感谢感谢😀
      2022-03-17
      回复
    • 微喵网络
      微喵网络
      2022-03-17回复Lik-
      我发的已经是最简单的瀑布流了,如果你只想左右两列展示,可以用flex布局,增加两列,然后把内容平均放进两列
      2022-03-17
      回复
    • Lik-
      Lik-
      发表于移动端
      2022-03-17回复微喵网络
      好嘞 感谢~/:rose
      2022-03-17
      回复
  • Lik-
    Lik-
    2022-03-17

    我又在网上搜了搜,想到了办法,需要把页面分成两块去渲染数组,数组分成两份,下标为奇数的一列,下标为偶数的一列,分开渲染就可以啦,对啦,这种布局好像有种专业说法——瀑布流布局

    2022-03-17
    有用
    回复 4
    • 六岛
      六岛
      2022-03-17
      不需要这么麻烦,使用flex可以实现瀑布流
      2022-03-17
      回复
    • 六岛
      六岛
      2022-03-17
      https://www.cnblogs.com/a-cat/articles/8618463.html
      2022-03-17
      回复
    • 拾柒
      拾柒
      2022-03-17回复六岛
      你这布局主要是靠column-count: 3;实现的,不是flex哈
      2022-03-17
      回复
    • Lik-
      Lik-
      2022-03-17回复六岛
      我用浮动实现了 开心,如果大家的需求和我一样高度只有两个变化的话,可以用浮动哦,我把父元素的宽度设置成了700rpx,子元素宽度为44%,并且设置了,右浮动最终实现啦
      2022-03-17
      回复
登录 后发表内容