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

Question

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

我在卡片中放置了一个div (参见card组件)，并放置了一个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;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Answer 2

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

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