在 React 中使用 Flexbox 水平渲染 SVG 数组时，SVG 尺寸易随元素数量动态缩放；通过为每个 SVG 包裹固定尺寸的容器并设置 flex: 0 0 auto，可彻底解决缩放问题，确保每个 SVG 始终保持原始大小。

在 react 中使用 flexbox 水平渲染 svg 数组时，svg 尺寸易随元素数量动态缩放；通过为每个 svg 包裹固定尺寸的容器并设置 `flex: 0 0 auto`，可彻底解决缩放问题，确保每个 svg 始终保持原始大小。

默认情况下，display: flex 容器中的子元素（如

✅ 正确解法是：为每个 SVG 添加一层包裹

，并赋予该容器明确的弹性行为与尺寸约束。推荐写法如下：

<div style="{{" display: flexwrap:>
  {states.map((state, index) => (
    <div key="{index}" style="{{" flex: auto svg width: viewbox margin:>
      <svg viewbox="0 0 100 35" width="100" height="35"><rect fill="black" width="25" height="25"></rect></svg>
</div>
  ))}
</div>

关键要点说明：

React Wrap

React UI？—— JavaScript？

下载

• flex: 0 0 auto 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，确保容器既不拉伸也不压缩，严格依据其内容（即 SVG）的固有尺寸或显式宽高进行布局；
• 显式设置
• flexWrap: "wrap" 防止容器溢出（当 SVG 数量过多时自动换行），提升健壮性；
• 务必为 map 添加 key（如 key={index}），避免 React 列表渲染异常；
• 若需等宽分布（如 4 个 SVG 均分父容器），则应改用 flex: "1 1 0" + min-width，但本场景目标是「尺寸恒定」，故 flex: 0 0 auto 是最优选择。

⚠️ 注意：避免直接在

控制布局行为，语义清晰且兼容性更佳。