React卡片组件无法Flex布局的修复方法咨询

你给.data-container设置了flex布局，但它的直接子元素只有<AirbnbApp/>这一个组件——flex布局只会作用于直接子元素，而非AirbnbApp内部的卡片组件。如果AirbnbApp组件用块级容器（比如div）包裹了所有卡片，这个容器会占满.data-container的整行，卡片自然会每行只显示一个。

方案1：调整AirbnbApp组件结构 #

如果你的AirbnbApp是用div包裹卡片列表的（类似下面的示例）：

// AirbnbApp.js 示例代码
import data from './data.js';
import NewCard from './new_card_component.js';

function AirbnbApp() {
  return (
    // 这个外层div是问题核心，它是块级元素，会占满整行
    <div>
      {data.map(item => (
        <NewCard key={item.id} {...item} />
      ))}
    </div>
  )
}

把外层div换成React片段（<>），或者直接去掉外层容器，让卡片成为.data-container的直接子元素：

function AirbnbApp() {
  return (
    <>
      {data.map(item => (
        <NewCard key={item.id} {...item} />
      ))}
    </>
  )
}

方案2：直接在.data-container中渲染卡片 #

修改AirBnBPage组件，跳过AirbnbApp，直接在.data-container里遍历渲染卡片：

// AirBnB.js 修改后代码
import "../CSS/airbnb.css";
import data from "./data.js";
import NewCard from "./new_card_component.js";

function AirBnBPage(){
    return (
        <div>
            <NavBar/>
            <Hero/>
            <section className="data-container">
                {data.map(item => (
                    <NewCard key={item.id} {...item} />
                ))}
            </section>
        </div>
    )
}
export default AirBnBPage

额外优化：给卡片添加横向间距 #

当前.card-sub只有上下margin，你可以补充横向margin，让卡片布局更美观：

.card-sub{
    margin:25px 25px 0 0; /* 增加右侧margin */
    width:320px;
    border:2px solid black;
}

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