在react js中排列卡片

在React.js中排列卡片可以通过使用CSS Flexbox或CSS Grid来实现。这两种方法都可以实现灵活的布局和排列。

使用CSS Flexbox： Flexbox是一种用于创建灵活的、响应式布局的CSS布局模型。在React.js中，可以通过设置容器组件的样式来实现卡片的排列。

首先，在容器组件的样式中设置display为flex，这将使其成为一个Flex容器。然后，可以使用flex-direction属性来指定卡片的排列方向，可以是水平排列（row）或垂直排列（column）。

示例代码：

import React from 'react';
import './CardContainer.css';

const CardContainer = () => {
  return (
    <div className="card-container">
      <div className="card">Card 1</div>
      <div className="card">Card 2</div>
      <div className="card">Card 3</div>
    </div>
  );
};

export default CardContainer;

在上面的示例代码中，card-container是容器组件的类名，card是卡片组件的类名。可以在CSS文件中定义这些类名的样式。

CardContainer.css文件：

.card-container {
  display: flex;
  flex-direction: row; /* 水平排列 */
}

.card {
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
}

使用CSS Grid： CSS Grid是一种二维布局系统，可以将网格划分为行和列，从而实现卡片的排列。在React.js中，可以通过设置容器组件的样式来使用CSS Grid。

首先，在容器组件的样式中设置display为grid，这将使其成为一个Grid容器。然后，可以使用grid-template-columns和grid-template-rows属性来指定网格的列数和行数。

示例代码：

import React from 'react';
import './CardContainer.css';

const CardContainer = () => {
  return (
    <div className="card-container">
      <div className="card">Card 1</div>
      <div className="card">Card 2</div>
      <div className="card">Card 3</div>
    </div>
  );
};

export default CardContainer;

在上面的示例代码中，card-container是容器组件的类名，card是卡片组件的类名。可以在CSS文件中定义这些类名的样式。

CardContainer.css文件：

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-gap: 10px; /* 卡片之间的间距 */
}

.card {
  padding: 20px;
  background-color: #f0f0f0;
}

以上是使用CSS Flexbox和CSS Grid在React.js中排列卡片的示例。根据实际需求，可以根据这些示例进行调整和扩展。

在react js中排列卡片

、、

我是一个初学者，刚刚开始用react js构建应用程序。我需要整理卡片，把它做成中号的。我想要下面这样的卡片，任何帮助都将不胜感激。提前感谢 ? 但我变得像这样我被困在这里了。 ?

浏览 63提问于2020-10-17得票数 0

1回答

如何自动排列卡片的行和列？

、

我正在尝试用ReactJS创建一个交互式用户界面，使用的是react-bootstrap。我正在使用卡片和CardGroup。我需要一种方法来自动将卡片排列在新的行中。类似于每行三张卡片，如果我有三张以上的卡片，就为第四张卡片创建一个新的行。import React, { Component } from 'react'; import {Card,CardGroup}

浏览 20提问于2019-09-18得票数 1

1回答

如何通过单击- javascript按钮将多个div随机放置在容器div中

、

我试图洗牌(按一下按钮)多张卡在同一个容器中，只使用javascript。他们基本上需要改变位置，每次我点击按钮。我的想法是创建一个函数，在单击时将其位置设置为绝对值，其顶部和左边为0，因此它们都会重叠。我已经做到了，但我不知道下一步该怎么做。也许这不是个好办法。因此，如果有更简单的解决方案，请与我分享。button class="position-button">SHUFFLE CARDS</button> </div> <

浏览 10提问于2022-10-27得票数 0

回答已采纳

2回答

我应该如何设计卡片的样式，以便每行可以有3张卡片？

、、、

使用array的map方法，我正在创建卡片组件，迭代容器中的状态。我想垂直排列这些卡片，每行只有3张卡片。这是ContentCard功能组件： import React from "react"; import CardLogo from "./../../..我应该如何样式化我在这个组件中迭代状态后得到的卡片，以便按照我上面所说的那样排列它们。import

浏览 37提问于2019-10-12得票数 3

回答已采纳

2回答

如何在scrollView中显示相邻的卡片？

我正在尝试在react原生中实现一个刷卡程序，其中的卡片是水平排列的，用户可以向左/向右滑动来查看来自相邻边缘的下一张卡片。但是我如何在同一视点中显示相邻的卡片呢？在scrollView中有没有实现这一点的道具？

浏览 0提问于2015-12-04得票数 3

2回答

单击“卡片”，然后导航到“响应”中的“卡片”页面详细信息。

我创建了一个页面，显示了一些卡片，还有一些小卡片的细节，现在我想点击任何一张卡片，导航到这个页面上，显示所有细节，我如何到达这个页面上的反应js？这需要Redux吗？

浏览 0提问于2018-07-14得票数 0

回答已采纳

1回答

如何在下一个js中实现动态路由？

、、、

我已经把我的React.js应用程序转换成Next.js，现在我想路由到我的博客详细信息页面，点击博客页面上的卡片，我从heroku获取数据。在react中，我正在使用react路由器-dom，如何在next.js中这样做？

浏览 7提问于2022-05-16得票数 -2

1回答

在material ui卡片中将页脚与底部对齐(内部示例)

、、、

我从material-UI端以卡片为例，希望在一个网格中排列多张卡片。所有都具有相同的高度(这是我使用高度:100%实现的)，并将页脚放在卡片的底部。不过，根据卡片中文本的长度，页脚不会显示在底部。我在下面的代码示例中准备了问题：https://codesandbox.io/s/material-demo-forked-xijum?file=/index.js 谁能给我一个提示，我怎

浏览 55提问于2021-05-11得票数 0

回答已采纳

1回答

动态div定位一个接一个及以下

、

用户可以创建带有内容和项目的卡片。用户也可以评论项目和卡本身。然后，我需要的是，显示评论，如图片。我用plumb.js制作的连接线。我从服务器女巫那里得到的卡片和评论是三个JS对象。(一个是卡片，一个项目和评论)。首先我画卡片，然后是项目，然后是评论。在注释对象中，我有卡片ID、父ID。在注释对象注释中没有任何顺序。一种方法是按评论顺序排列列表。我知道卡片上的物品

浏览 2提问于2012-09-21得票数 0

回答已采纳

2回答

为什么我们必须在根组件中定义状态？

我正在学习React。我不明白为什么我们要在App.js的根组件中定义状态。İf我有一个卡片组件，而我只有一个与卡片组件相关的状态，我应该在根组件还是卡片组件中定义它？你能帮我理解这个逻辑吗？

浏览 3提问于2021-02-10得票数 0

1回答

将卡片文本与图像旁边对齐

过去几周，我用Gatsby和Prismic更深入地研究了react.js。我已经创建了博客卡片，我使用flex: wrap (查看图片)显示这些卡片，现在我想水平显示我的博客卡片。 ? 我的代码： Cardlist.js： <React.Fragment> {/* --- STYLES -de

浏览 14提问于2019-09-14得票数 0

1回答

洗牌7张假想的交易卡，列出他们可以在谷歌单张中收到的订单。

、、、

假设我有一套七张独特的交易卡，我想把它们洗牌，列出它们所有可能的排列( 7的池，取7)。在安排的每一排列中，不得重复任何卡片，因为我只有一张卡片，而且我也不寻找可用的排列数目。我要名单本身。我将如何使用一个Google Sheet公式(在第一行之后没有手动数据输入)将这些卡片: A、B、C、D、E、F和G洗牌到一行唯一排列的列表中？它们可以排列成每个单元格内的整洁列表(ABCDEF

浏览 1提问于2022-09-16得票数 0

4回答

如何在网格系统中填充瓷砖之间的垂直空格(使用CSS)

、、

我正在尝试在网格系统中安排卡片。以下是卡片的属性 TLDR:如何删除这些空白并使用CSS ?

浏览 5提问于2014-06-16得票数 1

回答已采纳

1回答

如何在slatejs中获取光标位置或选择？

、、

我正在使用slate.js和React.js创建一个基本的编辑器。当我点击编辑器外的卡片时，我想在编辑器内的当前选定位置插入文本，即当我点击包含文本的卡片时，文本上的卡片应插入slate.js编辑器中的最后一个光标位置。

浏览 43提问于2019-04-02得票数 4

2回答

带有React Router的动态组件

、、、

我现在正在学习React Router，我想知道是否有可能将Topics.js渲染到一个新组件中，并在单击时删除顶部的链接。例如，假设我想要卡片而不是链接，当我单击卡片时，我希望链接消失并出现在新页面上，这样页面上就只会出现组件Topic.js https://stackblitz.com/edit/react-router-dynamic-routesfile=index.js

浏览 25提问于2019-05-15得票数 1

1回答

我不能使用React和CSS水平对齐我的组件

、、

我在排列一些响应引导卡时遇到了一些问题，唯一的方法是将它们放置在div中，但是我需要每个卡的一个组件，如果我这样运行代码，它就会出错。 import { Card, Button } from "react-bootstrap"; import ".primary">Go somewhere&

浏览 2提问于2021-11-11得票数 1

回答已采纳

2回答

为什么电子反应传递助推器使用旧状态？

、、、

我想实现更多的功能，但遇到了一个问题，当我将函数c传递到一个新的Card元素时，它似乎在创建时传递函数c中的钩子。{}{0: {react element of 0}}{0: {react element of 0}, 1: {react element o

浏览 3提问于2021-10-09得票数 2

回答已采纳

1回答

产生一张牌牌的所有排列？

、

我有一张按特定顺序排列的52个元素的卡片列表。列表中的每个元素都可以放在5个可用的插槽中:插槽1、2、3、4或5。我如何生成这5个插槽的所有可能排列？例如，一个排列是插槽1中的所有52个卡片，另一个是插槽1中的第一个卡片，第二个插槽中的第二个卡片等等。我一直在考虑使用迭代工具的置换函数，但我不知道如何应用5插槽的概念。

浏览 0提问于2017-04-09得票数 0

回答已采纳

1回答

在按下卡片按钮时，应转到新页面，以使用React路由器显示一些信息:路由器、链路、路由

、、

我在我的主页上有一些卡片，每个卡片都有一些信息和阅读按钮，所以如果用户按下按钮，应该被定向到一个新的页面来阅读卡片内的详细信息，但我不确定如何实现这一点。我尝试使用react-router，但当我按下按钮时，它在我的主页中呈现了新页面。请指导我完成需要采取的步骤。

浏览 7提问于2021-02-27得票数 0

1回答

React components Route有什么问题？

、、、

尝试使用React和React Hooks构建一个闪存卡应用程序时，我可以渲染我的主屏幕。在介绍Router时，我可以单击链接，将路径更新为我要查找的路径，但新页面中没有呈现任何内容。App.js import React, {useState, useEffect} from "react"; </Switch>

浏览 12提问于2021-02-08得票数 2

回答已采纳

点击加载更多