Reactjs 如何根据媒体查询使列表每行显示多个项目

我正在构建我的网站，其中显示了存储为JSON对象的各种列表

最初列表显示所有项目，然后我有一个搜索框，可以用来筛选出不同的项目

我希望我的列表每行显示多达4个json对象，一直到每行仅显示一个对象。取决于媒体查询

我认为，通过简单地调整列表项div的大小，它将自动在每行上添加额外的div，直到使用容器div的最大宽度，然后它将在下一行上渲染下一个对象，等等。然而，这并没有起作用，它继续只在另一个对象下方显示一个对象，并且不会在每个行上显示多个对象线路

列表布局：

export function Athlete(postDetail){
  return(
    <div className='Athletes'>
    <p>Name: {postDetail.Name}</p>
    <p>Town: {postDetail.Town}</p>
    <p>State: {postDetail.State} </p>
    <p>PostCode: {postDetail.PostCode}</p>
    <img src={postDetail.Image} className='photo' alt='athlete photo'/>
    </div>
  )
}

列表功能：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div>{athl}</div>
      }

export function AthleteSearchBox({value, handleInput}) {
  return (
    <div>
      <input onChange={handleInput} value={value} type ='text' className = 
'searchBox'/>
    </div>
  );
}

导出函数AthleteList（{Athleters}）{
让athl=运动员。地图（（运动员，i）=>{
返回
});
返回{athl}
}

搜索框功能：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div>{athl}</div>
      }

export function AthleteSearchBox({value, handleInput}) {
  return (
    <div>
      <input onChange={handleInput} value={value} type ='text' className = 
'searchBox'/>
    </div>
  );
}

导出函数AthleteSearchBox（{value，handleInput}）{
返回(
);
}

---

最初我的身高和宽度都是运动员{}作为55%，因此它每行只能渲染一个图像作为两个，这将占用容器div的100%以上。但是现在我想渲染更多，我将它们减少到15%，但结果仍然是另一个下方的图像。

div

默认情况下是一个

块

元素，这意味着默认情况下兄弟div将堆叠

如果您希望让他们排成一行，可以执行以下操作：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div style="display: flex; flex-wrap: wrap;">{athl}</div>
      }

导出函数AthleteList（{Athleters}）{
让athl=运动员。地图（（运动员，i）=>{
返回
});
返回{athl}
}

---

显示：flex

将把所有直接子项放在一行中，而

flex wrap:wrap换行将确保在给定行上没有足够空间时将项目放置在新行中。
div
默认情况下是一个
块
元素，这意味着默认情况下同级div将堆叠

如果您希望让他们排成一行，可以执行以下操作：

export function AthleteList({athletes}) {
      let athl = athletes.map((athlete, i) => {
        return <Athlete key = {athlete.ID} {...athlete}/>
      });
         return <div style="display: flex; flex-wrap: wrap;">{athl}</div>
      }

导出函数AthleteList（{Athleters}）{
让athl=运动员。地图（（运动员，i）=>{
返回
});
返回{athl}
}

显示：flex
将把所有直接子项放在一行中，而
flex wrap:wrap换行将确保在给定行上没有足够空间时将项目放入新行。
感谢您的帮助，它不起作用。我必须在其他地方遇到问题。我将继续工作，直到我得到它的排序。对不起，我最初把它放在正确的地方，看到更新的答案。这仍然不起作用。似乎没有什么改变它，我已经尝试，当我减少大小，并摆脱所有的空白等。对象只是渲染在左手边，但仍然是一个在另一个下面。再次谢谢你把它说出来。问题是我有另一个div覆盖了container div，使其忽略了您告诉我要使用的样式@Jacobdo。感谢您的帮助，它不起作用，我一定在其他地方遇到了问题。我将继续工作，直到我得到它的排序。对不起，我最初把它放在正确的地方，看到更新的答案。这仍然不起作用。似乎没有什么改变它，我已经尝试，当我减少大小，并摆脱所有的空白等。对象只是渲染在左手边，但仍然是一个在另一个下面。再次谢谢你把它说出来。问题是我有另一个div，它覆盖了container div，并使它忽略了您告诉我使用@Jacobdo的样式。