vue flex.css,Vue css js 多行多列实现

需求

需要实现一个循环来循环元素，每行4个元素

css flex

1.flex合并属性 flex: 1 0 50%;

1

2

3

4

2.基准属性flex-basis: 50%;

1

2

3

4

3.设置widthwidth: 50%;

1

2

3

4

export default {

data () {

return {

dataList: [

{ id: 1, name: 'F1' },

{ id: 2, name: 'F2' },

{ id: 3, name: 'F3' },

{ id: 4, name: 'F4' },

{ id: 5, name: 'F5' },

{ id: 6, name: 'F6' },

{ id: 7, name: 'F6' },

]

}

},

}

.flex-outer {

display: flex;

flex-wrap: wrap;

}

.flex-outer article {

background: limegreen;

border: 1px solid #eee;

box-sizing: border-box;

color: #fff;

padding: 15px;

}

/* flex合并属性 */

.flex-outer.flex-attr article {

flex: 1 0 50%;

}

/* flex-basis */

.flex-outer.flex-basis article {

flex-basis: 50%;

}

/* 设置width */

.flex-outer.width-attr article {

width: 50%;

}

pre {

display: flex;

justify-content: space-between;

}

自己实现

{{item.id}}

export default {

name: 'Test',

data () {

return {

dataList: [

{ id: 1, name: 'F1' },

{ id: 2, name: 'F2' },

{ id: 3, name: 'F3' },

{ id: 4, name: 'F4' },

{ id: 5, name: 'F5' },

{ id: 6, name: 'F6' },

{ id: 7, name: 'F6' },

]

}

},

}

.wrapper{

width: 100%;

height: auto;

display: flex;

justify-content: space-between;

flex-direction: row;

flex-wrap: wrap;

justify-content: left;

}

.wrapper-content{

width: 33%;

}

有些说css控制有时候不起作用，那么就需要js来控制

js 实现

{{item.id}}

{{dataList[index+1].id}}

export default {

data () {

return {

dataList: [

{ id: 1, name: 'F1' },

{ id: 2, name: 'F2' },

{ id: 3, name: 'F3' },

{ id: 4, name: 'F4' },

{ id: 5, name: 'F5' },

{ id: 6, name: 'F6' },

{ id: 7, name: 'F6' },

]

}

},

}

这种方式虽然可以实现数据换行，但是要写很多逻辑，而且要算好下标，感觉也不是很好

将一维数据转换成二维数组

{{cell.id}}

export default {

name: 'Test',

data () {

return {

dataList: [

{ id: 1, name: 'F1' },

{ id: 2, name: 'F2' },

{ id: 3, name: 'F3' },

{ id: 4, name: 'F4' },

{ id: 5, name: 'F5' },

{ id: 6, name: 'F6' },

{ id: 7, name: 'F6' },

]

}

},

computed: {

computedList() {

let index = 0;

let num = 4; // 每行几个元素

let arr = [];

for (let i=0; i

index = parseInt(i/num);

if (arr.length <= index) {

arr.push([]);

}

arr[index][i%num] = this.dataList[i];

}

console.log(arr)

return arr;

}

},

}

.wrapper{

width: 100%;

height: auto;

display: flex;

justify-content: space-between;

flex-direction: row;

flex-wrap: wrap;

}

.wrapper-content{

width: 33%;

}

这个一维数组转换二位数组算法可以优化，后续补充