React中flex-wrap条件判断失效，如何动态适配不同屏幕卡片数量？

问题分析 #

你当前代码的核心问题在于flexWrap的判断逻辑完全偏离需求：你根据数据总数是否能被5整除来决定是否换行，这会导致数据数非5的倍数时，所有卡片强制挤在一行不换行，完全不符合“一行展示5个卡片，超出自动换行，且适配不同屏幕尺寸”的目标。

修正方案 #

方案1：CSS原生响应式（推荐） #

利用Flex布局的flex-wrap: wrap结合弹性宽度计算，让卡片自动根据容器宽度换行，同时通过媒体查询精确控制不同屏幕下的每行数量，这是响应式布局的标准做法，无需JS介入，性能更优。

修正后的代码示例

import React from 'react';

function Layout() {
  const data = [
    { id: 1, title: "Test-1" },
    { id: 2, title: "Test-2" },
    { id: 3, title: "Test-3" },
    { id: 4, title: "Test-4" },
    { id: 5, title: "Test-5" },
    { id: 6, title: "Test-6" },
    { id: 7, title: "Test-7" },
    // 更多数据
  ];

  const cssCardHolder = {
    display: "flex",
    flexWrap: "wrap", // 始终允许换行
    gap: "1.5rem",
    padding: "0 1rem", // 避免卡片贴屏幕边缘
    boxSizing: "border-box"
  };

  const cssCard = {
    flex: "0 1 calc((100% - 4 * 1.5rem) / 5)", // 一行5个：总宽度减去4个间隙，平分5份
    minWidth: "150px", // 最小宽度，防止屏幕过小时卡片过窄
    height: "225px",
    padding: "15px",
    cursor: "pointer",
    borderRadius: "3px",
    border: "1px solid black",
    boxSizing: "border-box" // 确保padding和border计入宽度
  };

  return (
    <section className="card--holder" style={cssCardHolder}>
      {data.map((item) => (
        <div key={item.id} className="card" style={cssCard}>
          <p>{item.id}</p>
          <p>{item.title}</p>
        </div>
      ))}
    </section>
  );
}

export default Layout;

补充媒体查询（可选，精确控制断点）

如果需要在特定屏幕尺寸下调整每行数量，可在外部CSS文件中添加：

/* 平板屏幕（≤768px）：一行3个 */
@media (max-width: 768px) {
  .card {
    flex: 0 1 calc((100% - 2 * 1.5rem) / 3) !important;
  }
}

/* 手机屏幕（≤480px）：一行1个 */
@media (max-width: 480px) {
  .card {
    flex: 0 1 100% !important;
  }
}

方案2：JS监听窗口尺寸动态调整 #

若需通过JS逻辑控制每行数量，可监听窗口resize事件，根据屏幕宽度动态计算每行展示数：

import React, { useState, useEffect } from 'react';

function Layout() {
  const data = [/* 数据同前 */];
  const [cardsPerRow, setCardsPerRow] = useState(5);

  // 监听窗口尺寸变化
  useEffect(() => {
    const updateCardsPerRow = () => {
      const width = window.innerWidth;
      if (width < 480) setCardsPerRow(1);
      else if (width < 768) setCardsPerRow(3);
      else setCardsPerRow(5);
    };

    // 初始化执行一次
    updateCardsPerRow();
    window.addEventListener('resize', updateCardsPerRow);
    
    // 组件卸载时清理监听
    return () => window.removeEventListener('resize', updateCardsPerRow);
  }, []);

  const cssCardHolder = {
    display: "flex",
    flexWrap: "wrap",
    gap: "1.5rem",
    padding: "0 1rem"
  };

  const cssCard = {
    flex: `0 1 calc((100% - ${cardsPerRow - 1} * 1.5rem) / ${cardsPerRow})`,
    minWidth: "150px",
    height: "225px",
    padding: "15px",
    cursor: "pointer",
    borderRadius: "3px",
    border: "1px solid black",
    boxSizing: "border-box"
  };

  return (
    <section className="card--holder" style={cssCardHolder}>
      {data.map((item) => (
        <div key={item.id} className="card" style={cssCard}>
          <p>{item.id}</p>
          <p>{item.title}</p>
        </div>
      ))}
    </section>
  );
}

export default Layout;

额外优化点 #

• 避免在组件内部定义Card组件，直接在map中渲染卡片元素更高效。
• 用item.id作为key而非索引，避免数据顺序变化时引发渲染问题。
• 替换语义不合适的ul/li为div/p，更符合卡片组件的语义。

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