div布局如何实现先上下排序，然后左右排序，最后滚动条能上下滚动而不是左右呢？

Question

div布局如何实现先上下排序，然后左右排序，最后滚动条能上下滚动而不是左右呢？

先看一下效果图：

<!-- flex 排列布局 -->
<template>
  <el-row class="app" :gutter="10">
    <template  v-for="(item,k) of list">
      <el-col :key="k" class="app-col" :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
        <span>{{item.id}}</span>
        <el-progress class="progress" :percentage="item.num"></el-progress>
      </el-col>
    </template>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$Api.getDataApi('/mockList').then(res => {
        if (res && res.obj) {
          this.$set(this, 'list', res.obj.list)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app{
  display:flex;
  flex-direction:column;
  height:200px;
  flex-wrap:wrap;
  overflow: auto;
  .app-col{
    display:flex;
    span{
      width:50px,
    }
    .progress{
      margin-left: 10px;
      line-height: 22.25px;
      flex: 1;
    }
  }
}

</style>

尝试了很多次都实现不了，先上下排序，然后左右排序可以实现，但是就卡在‘滚动条能上下滚动而不是左右’。

有没有大佬能解决呢？

Answer 1

columns 不就是你想要的嘛？

---

https://jsrun.net/pkPKp/edit

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

Answer 3

你需要解决一个问题。

什么时候从第一列到第二列？

举个例子，看你这图里，数据可能有几十条，假如算100条吧。
然后假设你希望是3列，那么可以算一下，第一列最后一条应该是34。

那么怎么让34之后就换行呢，那就是设定高度咯。