如何使用flexbox显示div中的内容

Question

我在第一个react应用程序中使用flexbox定位物品/卡片时遇到问题。

我在我的卡片中放了一个div(参见卡片组件(，然后放了一块display：flex；但我的输出中的每一张卡似乎都像一个块(类似列(，它只调整我的内容，而不是我卡上的每一个div，我希望我的div是一行。

我也试着改变方向，但什么都没发生，你知道如何让那些家伙？

//My code in my Main//
const data = [
{id: 1, t: 'Card-1',  description: 'This is a Card-1'},
{id: 2, t: 'Card-2', description: 'This is a Card-2'},
{id: 3, t: 'Card-3', description: 'This is a Card-3'},
{id: 4, t: 'Card-4', description: 'This is a Card-4'},
{id: 5, t: 'Card-5', description: 'This is a Card-5'},
]
function Main () {
return (
<div>
<div className="main-container">
{data.map(d => {
return (
<Card 
key = {d.id}
title = {d.t}
description = 
{d.description}
/>
)
})}
</div>  
</div>)
export default Main;

//end of my Main//
// My code in my Card //
import React from 'react';
import './style.css';
function Card ({ title, description }) {
return (
<div className="items">
<h2>{title}</h2>
<p>{description}</p>
</div>
)
}
export default Card;
//
//The style.css of my Card //
div.items {
display: flex;
border: 2px solid darkgreen;
margin: 15px;
max-width: 250px;
min-height: 200px;
background-color: deeppink;
flex-direction: column;
}
div.items h2 {
flex: 1;
text-align: center;
}
div.items p {
flex: 1;
text-align: center;
}
//ends here

Answer 1

我刚刚在主容器中放置了一个柔性显示器：

.main-container{
display: flex
}
.div-1 {
flex: 1 //depends on your taste
}

Answer 2

是否希望所有卡片都显示在一行中，而卡片中的内容必须是一列中唯一显示的内容，我错了吗？如果只是这样：

.main-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}