React Flex布局问题：卡片尺寸固定、对齐及每行数量调整求助

核心调整思路 #

放弃固定1500px容器宽度，改用最大宽度+水平居中+统一内边距的布局逻辑，配合flex属性逐一解决问题：

1. 限制每行显示4张卡片 #

给卡片容器开启自动换行，设置固定间隙，同时给卡片设置精准宽度：

• 容器添加display: flex; flex-wrap: wrap; gap: 20px;
• 卡片用固定宽度（如280px），或用calc(25% - 15px)自适应容器宽度，确保每行刚好容纳4张

2. 卡片宽高不随屏幕变化 #

给卡片设置固定宽高，同时禁用flex压缩：

.card {
  width: 280px;
  height: 350px;
  flex-shrink: 0;
  /* 其他样式 */
}

3. 两个卡片区域起始位置对齐 #

给两个卡片容器设置完全相同的max-width、水平居中规则和左右内边距，确保边界对齐：

.card-container {
  max-width: 1200px; /* 4张280px卡片+3个20px间隙=1180px，留20px余量 */
  margin: 0 auto;
  padding: 0 20px;
}

4. 头部区域对齐问题 #

给头部设置和卡片容器一致的max-width、水平居中规则和内边距，让头部与卡片区域左右边界对齐：

.header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

完整可运行代码 #

React组件代码 #

import React from "react";
import "./styles.css";

const Card = ({ title }) => (
  <div className="card">
    <h3>{title}</h3>
    <p>卡片内容占位</p>
  </div>
);

export default function App() {
  const productCards = Array.from({ length: 8 }, (_, i) => `产品卡片 ${i+1}`);
  const resourceCards = Array.from({ length: 2 }, (_, i) => `资源卡片 ${i+1}`);

  return (
    <div className="app-container">
      <header className="header">
        <h1>产品与资源库</h1>
      </header>

      <section className="card-section">
        <h2>产品列表</h2>
        <div className="card-container">
          {productCards.map(title => <Card key={title} title={title} />)}
        </div>
      </section>

      <section className="card-section">
        <h2>资源列表</h2>
        <div className="card-container">
          {resourceCards.map(title => <Card key={title} title={title} />)}
        </div>
      </section>
    </div>
  );
}

样式文件（styles.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  border-bottom: 1px solid #eee;
  background-color: white;
}

.card-section {
  padding: 30px 0;
}

.card-section h2 {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  font-size: 20px;
  color: #333;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  width: 280px;
  height: 350px;
  flex-shrink: 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card h3 {
  margin-bottom: 10px;
  color: #333;
}

.card p {
  color: #666;
}

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