让CSS flex布局最后一行列表左对齐

问题

我用flex布局渲染后端返回给我的数据时，发现最后一行不对，应该向左对齐，而不是两端对齐。

解决

采用了添加空白项，往后面多加几个空白项，然后给他设置opacity：0，这里不能设置display：none

代码

return (
    <div className='movieLists'>
      {/* {page} */}
      {/* {JSON.stringify(listMap[page])} */}
      {
        listMap.map((item, index) => {
          return (
            <ListItem info={item} key={index}></ListItem>
          )
        })
      }
      {/* {JSON.stringify(new Array(6 - listMap.length % 6).fill(''))} */}
      {
        new Array(6 - listMap.length % 6).fill('').map((item, idx) => {
          return <div key={'placehold-' + idx} className="list-item placehold-" >
            <div className='card'></div>
          </div>
        })
      }


    </div>
  )

  &.placehold-block {
    pointer-events: none; // 事件小透明
    opacity: 0; // 外观小透明
    // display: none;
  }