我正在嘗試制作帶有影像和簡短描述的卡片串列，但我無法確定此處的 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;' 謝謝大家
uj5u.com熱心網友回復：
也許父元素是絕對定位的，因此為什么 .box 類不受限制？
uj5u.com熱心網友回復：
.box {
display: flex;
justify-content: space-evenly;
list-style: none;
align-items: stretch;
gap:20px;
margin: 2%;
flex-wrap: wrap;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/468995.html
標籤：javascript css 反应 jsx
上一篇：div使內部div低于另一個