如何在反应中并排（水平）而不是垂直渲染卡片？答案

【问题标题】：How to render the cards side by side (horizontally) rather than vertically in react?如何在反应中并排（水平）而不是垂直渲染卡片？
【发布时间】：2021-05-23 09:30:55
【问题描述】：

我想并排显示卡片，但卡片是垂直显示的。

这些牌是一张低于另一张的。我希望他们并排。

这是代码

App.jsx

import React from "react";
import Card from "./Card";
import content from "./content";

function createEntry(entry) {
  return <Card key={entry.id} emoji={entry.emoji} back={entry.back} />;
}

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>
      {content.map(createEntry)}
    </div>
  );
}

export default App;

卡片.jsx

import React from "react";
import ReactCardFlip from "react-card-flip";

const CardStyle = {
  border: "1px solid #03506f",
  borderRadius: "30px",
  padding: "20px",
  margin: "20px",
  width: "270px",
  height: "170px",
  backgroundColor: "#75cfb8"
};

function Card(props) {
  const [isFlipped, setFlipped] = React.useState(false);

  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection="vertical">
      <div
        style={CardStyle}
        className="CardFront"
        onClick={() => setFlipped((prev) => !prev)}
      >
        <div>
          <span className="emoji" role="img" aria-label="emojis">
            {props.emoji}
          </span>
        </div>
      </div>
      <div
        style={CardStyle}
        onClick={() => setFlipped((prev) => !prev)}
        className="CardBack"
      >
        <p>{props.back}</p>
      </div>
    </ReactCardFlip>
  );
}

export default Card;

content.js

const content = [
  {
    id: 1,
    emoji: "????",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  },
  {
    id: 2,
    emoji: "????",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  },
  {
    id: 3,
    emoji: "????",
    back:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor orci eu lobortis elementum nibh tellus."
  }
];

export default content;

我只是 React 的初学者，还在学习过程中。请建议需要做些什么来解决这个问题。任何帮助将不胜感激。

【问题讨论】：

display: inline 还是使用flex？这不是 React 问题，而是 CSS 问题。
在哪里应用显示：内联属性？我应用到了 styles.css 文件 ----> ReactCardFlip { display : inline } 我猜我以错误的方式应用它

标签： javascript html css reactjs react-native

【解决方案1】：

您可以使用CSS flexbox 中的wrap 属性使其响应小屏幕

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {content.map(createEntry)}
      </div>
    </div>
  );
}

【讨论】：

它起作用了，只需要添加边距以获得适当的间距。谢谢！

【解决方案2】：

通过使用 CSS flex：

function App() {
  return (
    <div>
      <h1>
        <span>Heading</span>
      </h1>

      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
         {content.map(createEntry)}
      </div>
    
    </div>
  );
}

【讨论】：

【解决方案3】：

您必须将卡片功能包装在 app.jsx 中。你可以使用弹性

<div style={{ display: 'flex' }} >
   {content.map(createEntry)}
</div>

或

将 css 添加到卡片 div display: inline

【讨论】：

这对我也有用，但连续最后一个被删掉了。