请问有人写过这种flex布局吗?

Question

这些是被循环出的数据

左边123456 右边789101112

这样排列

我flex布局感觉用的还算熟练，但是这种真的不知道怎么写了 请问有没有人给个思路

Answer 1

竖向排列，换行就行了。
flex-direction:column;
flex-wrap: wrap;

Answer 2

哪怕不用flex也是能实现的
比如：
左右分别是不同的盒子，用相同的数据渲染，左边判断1-6显示，右边显示7-12

Answer 3

可以用 grid 布局实现，具体做法是通过 grid-auto-flow 改变排列流的方向

grid-auto-flow: column;

可以参考张鑫旭的这篇文章 https://www.zhangxinxu.com/wo...

Answer 4

这个不需要 flex，column-count 才是你应该用的。

Answer 5

直接从数据处理角度入手，先把数据使用 chunk 的方式分成每 6 条一组，然后套两层 for 循环来构建 DOM 就好了呀

Answer 6

body {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  height: 500px;
  background-color: antiquewhite;
  display: flex;
  align-content: stretch;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: scroll;

  .child {
    width: 200px;
    height: 100px;
    background-color: aquamarine;
    margin: 10px 10px;
  }
}

<div class="container">

</div>

let a = 50

function init() {
  let $ref = document.getElementsByClassName('container')[0]
  console.log($ref)

  for (let i = 0; i < a; i++) {
    let child = document.createElement('div')
    child.setAttribute('class', 'child')
    child.innerText = i
    $ref.appendChild(child)
  }
}

init()

这样就可以