Open lulujianglab opened 5 years ago
经常使用 flex 布局的小伙伴应该遇到过一个问题,就是当我们使用 space-between 属性等分布局时,在多行且不是整数时,中间就会空出一格,比如
我有一个宽度为 576 px , 有 6 个固定的 item宽为 130,如果等分布局,就会出现下面这种情况
这种情况应该怎么处理呢?我们可以通过手写一个函数来填充,比如每行有 num 个 item ,始终渲染 num 的整数个 item ,多出的用 null 填充
handleObj = (i) => ( {id: i, hidden: true} ) // collection: 原数据list,是个数组 ; num: 每行需要展示的item数 handleShowContent = (collection, num) => { const hiddenNum = Math.ceil(collection.length / num) * num - collection.length // 行数 const newCollection = JSON.parse(JSON.stringify(collection)) for (let i = 0; i < hiddenNum; i+=1) { newCollection.push(this.handleObj(collection[collection.length-1].id+i+1)) } return newCollection }
<div className={styles.list}> { (element || []).map(ele => ( <div key={ele.id} className={`${styles.item} ${ele.hidden? styles.show : ''}`} /> )) } </div>
.list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 12px; height: 200px; background-color: #fff; } .show { visibility: hidden; } .item { border:1px solid #e5e5e5; width:130px; height:80px; }
处理完之后就能得到正常的展示
经常使用 flex 布局的小伙伴应该遇到过一个问题,就是当我们使用 space-between 属性等分布局时,在多行且不是整数时,中间就会空出一格,比如
我有一个宽度为 576 px , 有 6 个固定的 item宽为 130,如果等分布局,就会出现下面这种情况
这种情况应该怎么处理呢?我们可以通过手写一个函数来填充,比如每行有 num 个 item ,始终渲染 num 的整数个 item ,多出的用 null 填充
处理完之后就能得到正常的展示