Как применить Flex Direction в React ⇐ CSS

[Anonymous]

Я создаю образец веб-страницы с использованием карточек в React, я использовал React Bootstrap для карточек
Здесь я не могу установить свойство flex.
Это мой компонент:< /p>

Код: Выделить всё

import 'bootstrap/dist/css/bootstrap.min.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import './Style.css';
import img from  './images/download.jpg'
import Button from 'react-bootstrap/Button';

function MovieList() {
return (




NOW SHOWING



Card Title

Card --->1



Cras justo odio
Dapibus ac facilisis in
Awesome





NOW SHOWING



Card Title

Card --->2



Cras justo odio
Dapibus ac facilisis in


Awesome





NOW SHOWING



Card Title

Card --->3



Cras justo odio
Dapibus ac facilisis in


Awesome


)
}

export default MovieList;

Вот код CSS:

Код: Выделить всё

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Я получаю веб-страницу этого типа, но мне не нужна.
Веб-страница, которую я получаю
Я использовал в основном все способы применения гибкого свойства Css,
Но не получилась идеальная веб-страница.
Я хочу, чтобы все карточки отображались в виде строк.
Если у кого-нибудь есть такие Идея, пожалуйста, поделитесь!

Подробнее здесь: https://stackoverflow.com/questions/787 ... n-in-react