Как расположить мои элементы по горизонтали в реакции с css

Question

У меня есть компоненты, которые при просмотре в моем приложении расположены вертикально, и я бы хотел, чтобы это было горизонтально. К какому компоненту я должен применить свойство css и что бы это было?

Спасибо

Основной компонент

    import React from 'react'
import Tournament from './Card.jsx'
import Tournaments from './ListTournaments.jsx'
import Carousel from './Carousel.jsx'
import '../resources/styles/grid.css'
import Header from './Header.jsx'
import Modal from './Modal.jsx'
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";


const App = () => (
  <div>
    <Header />
    <Switch>
      <Route
       exact path="/"
      >
        <Carousel/>


      </Route>
      <Route
        path = "/tournaments"
      >

      <Tournaments/>


      </Route>
    </Switch>
  </div >
)

export default App

компоненты, которые отображаются вертикально

import React from 'react';
import Tournament from './Card.jsx'
var tournaments = require('../resources/data/tournament.json')

export default function ListTournaments(props) {


  return (
    tournaments.map((
      tournament,index )=>
        <Tournament
          title={tournament.title}
          description={tournament.description}
          requierements={tournament.requierements}
          date={tournament.date}
          img={tournament.img}
          key = {index}

        />

    )
  )
}

Answer 1

Вы можете обернуть элементы компонента ListTournaments в div и сделать его flexbox через css.

=> Вернуть это из ListTournaments

return (
    <div className="tournaments-list">
      tournaments.map((
        tournament,index )=>
          <Tournament
            title={tournament.title}
            description={tournament.description}
            requierements={tournament.requierements}
            date={tournament.date}
            img={tournament.img}
            key = {index}

          />

      )
     </div>
    )

Добавить это css (или аналогичный, например, сетка)

.tournaments-list{
    display: "flex";
}