使用React和CSS无法水平对齐React Bootstrap卡片组件怎么办？

问题根源 #

flex布局的作用对象设置错误：display:flex规则是作用于父容器，给它的直接子元素设置排列规则的。你现在把flex样式写在了每个HostingCard单独包裹的.main容器上，相当于每张卡片自己是一个独立的flex容器，每个容器里只有1张卡片，自然会默认垂直排列。
你之前把多张卡片放在同一个div里能水平对齐，就是因为当时所有卡片都是同一个flex容器的子元素，符合flex的生效逻辑。

修复方案 #

第一步：修改App.tsx，给所有卡片添加统一父容器 #

把多个HostingCard都包裹在同一个父容器内，把flex布局作用在这个公共父容器上：

import React from "react";
import "./App.css";
import Header from "./Header";
import HostingCard from "./HostingCard";

function App() {
  return (
    <div className="App">
      <Header />
      <h1 style={{ padding: "1rem" }}>Hospedagens</h1>
      {/* 新增卡片公共容器 */}
      <div className="cards-wrapper">
        <HostingCard />
        <HostingCard />
      </div>
    </div>
  );
}

第二步：修改HostingCard.tsx，删除多余的外层flex容器 #

不需要给单个卡片套独立的flex容器，直接返回Card组件即可，同时可以把卡片间距直接写在Card的样式里：

import { Card, Button } from "react-bootstrap";
import "./App.css";

export default function HostingCard() {
  return (
    <Card style={{ width: "18rem", margin: "0 0.1rem 1rem 0.1rem" }}>
      <Card.Img variant="top" src="https://picsum.photos/200" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

第三步：修改App.css，给公共父容器添加flex布局 #

替换原来的.main样式，给卡片公共容器设置排列规则：

.cards-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 卡片数量超出一行时自动换行，不需要可以删掉 */
  padding: 0 1rem;
}

效果对比 #

当前实际效果：

修改后即可达到预期效果：

可选优化：你用的是React Bootstrap，也可以直接用内置的栅格系统（Row/Col组件）实现，不需要自己写flex样式，响应式适配更方便。

内容的提问来源于stack exchange，提问作者thesmilingsabre