使用Flexbox绘制3×3网格失效，求问题排查与解决方法

我尝试用Flexbox实现一个3×3的元素网格，代码如下：

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap"
      }}
    >
      {Array.from({ length: 9 }, (_, index) => (
        <div
          style={{
            flex: 1,
            height: 200,
            backgroundColor: "gray",
            margin: 4,
            width: 150
          }}
        />
      ))}
    </div>
  );
}

当前渲染效果：

期望的效果：

我必须使用Flexbox，不能用Grid布局，已经尝试了flex-wrap，但设置卡片宽度后依然无效，请问问题出在哪？

问题原因与修复方案 #

问题出在flex: 1这个属性上。flex: 1是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写，它会让弹性项尽可能占满可用空间，直接覆盖了你设置的width属性，导致每行元素被拉伸填满，无法按固定宽度换行成3列。

以下是两种可行的修复方式：

方式一：百分比适配（推荐） #

这种方式能适配不同容器宽度，始终保持3列布局：

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        gap: "8px", // 用gap替代margin，避免间距折叠问题
        padding: "8px"
      }}
    >
      {Array.from({ length: 9 }, (_, index) => (
        <div
          style={{
            flex: "0 0 calc(33.333% - 8px)", // 固定不伸缩，宽度为容器1/3减去gap间距
            height: 200,
            backgroundColor: "gray"
          }}
        />
      ))}
    </div>
  );
}

方式二：固定宽度 #

如果需要严格保持150px的元素宽度，可这样设置：

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "flex-start" // 确保元素靠左排列，默认值可省略
      }}
    >
      {Array.from({ length: 9 }, (_, index) => (
        <div
          style={{
            flex: "0 0 150px", // 固定宽度150px，禁止伸缩
            height: 200,
            backgroundColor: "gray",
            margin: "4px"
          }}
        />
      ))}
    </div>
  );
}

关键调整说明 #

• flex: 0 0 [宽度值]：flex-grow:0禁止元素放大，flex-shrink:0禁止元素缩小，确保元素宽度稳定
• 用gap替代margin：更简洁地控制元素间的间距，无需手动计算左右margin总和
• 百分比方式适配性更强，固定宽度方式适合需要严格尺寸的场景

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