Javascript 我如何分离js卡？

从“React”导入React
导入“/Projects.css”；
从'react router dom'导入{Link}；
函数项目（{projectsData}）{
返回(
{projectsData.map（（索引）=>{
常量{img，link，title}=索引
返回(
{title}
)
})}
)
}
导出默认项目
消防处_{
背景色：#fff；
高度：100vh；
宽度：100%；
/*还要调整高度*/
高度：适合的内容；
}
伊玛格{
高度：自动；
宽度：20%；
背景色：rgb（183183204）；
边界半径：9px；
}
.伊玛格·伊玛格{
边际上限：0px；
边界半径：7px；
}
美国作家{
身高：40%；
}
.卡片_{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
证明内容：中心；
}
从“React”导入React
从“./Navbar/BodySection”导入BodySection
从“./Navbar/Navbar”导入导航栏
从“./Navbar/Content”导入内容
从“/Data”导入{Data1，projectsData}
从“./Navbar/Projects”导入项目
函数Home（）{
返回(
)
}
导出默认主页

我想把卡片分开，水平和垂直放置，而不仅仅是垂直放置。 非常感谢。

---

请忽略我将要写的内容，因为它不会让我发布这篇文章，说我需要添加更多细节，但我没有更多细节要添加。

这是css flexbox的完美用例。我为你准备了一个快餐

您可以使用我的代码作为起点，并扩展到您的用例

---

如果您需要快速介绍flexbox，这里有一个很好的方法。

顶层应该是将卡映射到其中的flex，如下所示：

function Projects({ projectsData }) {
  return (
    <div className="_div_">
       <div className="cards_">
      {projectsData.map((index) => {
        const { img, link, title } = index;
        return (
              <div className="_imag">
                <img src={img} />
                <div className="_writings">
                  <h1>{title}</h1>
                  <a href={link}> See Project</a>
                </div>
              </div>
        );
      })}
      </div>
   </div>
  );
}

功能项目（{projectsData}）{
返回(
{projectsData.map（（索引）=>{
常量{img，link，title}=索引；
返回(
{title}
);
})}
);
}

您可能应该在

卡上有一个card元素和这些属性，以便更好地定位它们：
使用flexbox或网格布局。flexbox不工作，如果我做错了，我不知道该怎么做才能正确。我已经试了好几个小时了。你能在codesandbox上做一个有效的例子吗？它不应该是这样的，但无论如何它都变成了这样。应该是照片上的样子。问题是我知道基本的flexbox。我在react和css混合时遇到了问题，就像在本例中一样。您需要使用
display:flex
将“卡片”映射到父div中。目前你没有这样做。您的卡片上有
display:flex
，这可能不是必需的，也不是您想要的。非常感谢您。作为一个时间非常有限、没有背景的自学者，即使在简单的东西上浪费了数百万个小时，也会被困在上面，这是很痛苦的。@Roshan没问题，如果它能帮你把这个标记为答案的话
function Projects({ projectsData }) {
  return (
    <div className="_div_">
       <div className="cards_">
      {projectsData.map((index) => {
        const { img, link, title } = index;
        return (
              <div className="_imag">
                <img src={img} />
                <div className="_writings">
                  <h1>{title}</h1>
                  <a href={link}> See Project</a>
                </div>
              </div>
        );
      })}
      </div>
   </div>
  );
}