我如何让这个 flex 容器包装在 React 中？

Question

我正在尝试制作一张带有图片和简短描述的卡片列表，但我无法在此处找出 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;'谢谢大家

Answer 1

也许父元素是绝对定位的，因此为什么 .box class 不受限制？

Answer 2

.box {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
  align-items: stretch;
  gap:20px;
  margin: 2%;
  flex-wrap: wrap;
}

我如何让这个 flex 容器包装在 React 中？

How do I get this flex container to wrap in React?

javascript

css

jsx

reactjs