我正在try 制作一个带有图片和简短描述的卡片列表,但我无法理解这里的CSS.这是对JSON数据的迭代.我无法让flexbox包装到下一行.它不断向第一行添加新文章.
<div className='box'>
{artData.map((data:any, key:string) => {
return (
<li key={key} className='article'>
<div>
<img src={data.images[0]}></img>
</div>
<br></br>
{data.description}</li>);
})}
</div>
.box {
display: flex;
justify-content: space-evenly;
list-style: none;
align-items: stretch;
gap:20px;
margin: 2%;
flex-wrap: row wrap;
}
更新:我错过了"flex-wrap:wrap;"谢谢大家