React 中固定尺寸水平排列 SVG 方法

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [states, setStates] = useState([0, 0, 0, 0, 0]);

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
      {states.map((state, stateIndex) => (
        <div 
          key={stateIndex} 
          style={{ 
            flex: "0 0 auto",     // 禁用伸缩：不增长、不收缩、不自动分配空间
            width: "100px",      // 推荐使用固定像素宽度（更可控），或按需设为百分比（如 "20%"）
            height: "35px"       // 与 viewBox 高度对齐，避免缩放失真
          }}
        >
          <svg 
            viewBox="0 0 100 35" 
            style={{ 
              width: "100%", 
              height: "100%", 
              display: "block"   // 防止行内 SVG 底部空白
            }}
          >
            <rect fill="black" width="25" height="25" />
          </svg>
        </div>
      ))}
    </div>
  );
}

✅ 关键要点说明：

• flex: 0 0 auto 是 flex-grow: 0, flex-shrink: 0, flex-basis: auto 的简写，确保每个 SVG 容器严格按其内容尺寸渲染，不受父容器剩余空间影响；
• 使用固定 width/height（如 "100px"）比百分比更可靠，尤其当数组长度动态变化时；若需响应式布局，可结合 CSS 媒体查询或 clamp() 函数；
• gap: "8px" 替代 margin 实现均匀间距，语义更清晰且避免外边距折叠问题；
• 务必为 .map() 添加 key={stateIndex}（已补全），避免 React 渲染异常；
• display: "block" 可消除

⚠️ 注意事项：

• 避免直接对
• 若需支持 IE11，请改用 flex: "none" 并搭配 width/min-width；
• 当 SVG 内容复杂时，建议提取为独立组件并复用 React.memo 提升性能。

通过以上结构化封装与精准样式控制，无论 states 数组长度如何变化，每个 SVG 都将保持一致的尺寸与间距，真正实现稳定、可维护的水平布局。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。