我正在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;"谢谢大家

推荐答案

可能父元素的位置是绝对的,因此.盒子课不受限制吗?

Javascript相关问答推荐

无法检测卡片重叠状态的问题

使用ThreeJ渲染的形状具有抖动/模糊的边缘

如何在文本字段中输入变量?

对网格项目进行垂直排序不起作用

闭包是将值复制到内存的另一个位置吗?

React.Development.js和未捕获的ReferenceError:未定义useState

连接到游戏的玩家不会在浏览器在线游戏中呈现

如何根据输入数量正确显示alert ?

在JavaScript中,有没有一种方法可以迭代字符串的词法标记?

select 2-删除js插入的项目将其保留为选项

固定动态、self 调整的优先级队列

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

暂停后只有一次旋转JS

在JS/TS中构造RSA公钥

JavaScript -如何跳过某个字符(S)来打乱字符串中的字符

如何解析/data/build中的Angularnode_modules/chart.js/dist/Chart.js?

如何在Angular中分离桌面和移动页面并延迟加载每个页面?

将数组解析为js中的无序列表

如果用户的页面宽度低于某个阈值,如何使用js更改html页面中的css文件

解析JS中的UK格式日期字符串