如果不是每行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;}