如何在反應中並排（水平）而不是垂直渲染卡片？

Question

我想並排顯示卡片，但卡片是垂直顯示的。

這些卡片一張一張地出現在另一張下面。 我要他們並排。

這是代碼

應用程序.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;

內容.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 的初學者，還在學習過程中。 請建議需要做些什么來解決這個問題。 任何幫助將不勝感激。

Answer 1

通過使用 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>
  );
}

Answer 2

您可以在CSS flexbox中使用wrap屬性使其響應小屏幕

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

Answer 3

您必須將卡 function 包裝在 app.jsx 中。 你可以使用彈性

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

或者

將 css 添加到卡 div display: inline