React中如何将垂直组件改为水平排列？CSS应用对象与属性咨询

要实现Tournament组件的水平排列，核心是给ListTournaments组件的父容器添加布局样式——因为它是所有Tournament子组件的直接包裹者。具体步骤如下：

1. 给ListTournaments添加外层容器 #

当前你的ListTournaments组件直接返回了map生成的Tournament列表，没有外层容器。首先需要给这些Tournament组件套一个容器元素（比如div），这样才能给它应用布局样式：

// 修改后的ListTournaments组件
import React from 'react';
import Tournament from './Card.jsx'
var tournaments = require('../resources/data/tournament.json')

export default function ListTournaments(props) {
 return (
   {/* 添加外层容器，并设置className用于绑定样式 */}
   <div className="tournaments-container">
     {tournaments.map(( tournament,index )=> 
       <Tournament 
         title={tournament.title} 
         description={tournament.description} 
         requierements={tournament.requierements} 
         date={tournament.date} 
         img={tournament.img} 
         key = {index} 
       />
     )}
   </div>
 )
}

2. 给容器添加Flexbox样式 #

Flexbox是实现水平布局最简洁的方案，给.tournaments-container添加以下CSS属性即可：

.tournaments-container {
  /* 开启Flex布局，子元素默认沿水平方向排列 */
  display: flex;
  /* 可选：当容器宽度不足时，子元素自动换行适配小屏幕 */
  flex-wrap: wrap;
  /* 可选：设置卡片之间的水平+垂直间距，避免外边距折叠问题 */
  gap: 1.5rem;
  /* 可选：让卡片在容器内水平居中对齐 */
  justify-content: center;
  /* 可选：让卡片在容器内垂直居中对齐 */
  align-items: center;
}

补充：Grid布局方案（可选） #

如果你需要更规整的网格式水平排列，也可以用Grid布局替代Flex：

.tournaments-container {
  display: grid;
  /* 每行自动填充，最小卡片宽度280px，剩余空间平分列宽 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

这种方式适合需要固定列宽或响应式网格布局的场景。

内容的提问来源于stack exchange，提问作者Javier Richards