flex布局中使用 justify-content: space-between 中间图片为空处理

如果不是每行3列的情况，又想做到从左开始排列的同时能够自适应，这个时候就需要多一个容器了（其原理是，外层容器flex-start，内层容器运用等分原则平分100%的宽度（如375px），然后在内层容器使用justifyContent: 'center'进行居中处理，最后，最内层的div就是我们要展示的区块）

<div style={{ padding: '8px 15px', borderBottom: '1px solid #ebebeb' }}>
          <p>参与人：<span>10人应参与</span><span>9人签到</span><span>签到率90%</span></p>
          <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', }}>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => {
              return <div style={{ width: '20%', display: 'flex', justifyContent: 'center' }}>
                <div style={{ width: 50, height: 50, margin: '8px 0',  borderRadius: '50%', background: '#0079fe' }}></div>
              </div>
            })}
          </div>
        </div>

当我们使用flex布局时，会使用到平分间距 justify-content: space-between;(只适用于每行3列表)

就会出现下面这样的bug

最后一排如果不满三个div，就会这样

这个时候，只需要在父级元素使用一个伪类就能解决 :after{content:'',width:280px;}