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

Question

我在我的第一个 react 应用程序中使用 flexbox 定位我的项目/卡片时遇到了麻烦。

我在卡片中放了一个 div（参见 Card 组件），然后放了一个 display: flex;但似乎我的输出中的每张卡片都像一个块（类似列），它只弯曲我的内容，而不是卡片的每个 div，我想要的是我的 div 是一行。

我也尝试了 flex-direction，但没有任何反应，知道如何制作这些家伙吗？

//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;
}