React中Tailwind Flex布局失效，求代码修改方案

你当前的布局失效主要是因为滥用绝对定位和类名拼写错误，导致flex布局无法正常工作，元素出现重叠。以下是具体问题点和修复方案：

问题点梳理 #

• 类名拼写错误：justify-betwween 应为 justify-between
• 所有子元素都添加了absolute，完全脱离文档流，flex容器的布局属性彻底失效
• 左侧卡片内的文本都用absolute，导致文本重叠在一起
• 右侧按钮用mt-20手动控制垂直位置，不符合flex布局的响应式逻辑

修复方案 #

1. 移除所有不必要的absolute定位
2. 修正类名拼写错误
3. 左侧卡片用flex垂直排列文本，替代绝对定位
4. 右侧按钮组用flex垂直排列，让flex布局自动管理间距
5. 给外层容器添加合适的宽度和内边距，保证响应式适配

修正后的完整代码 #

const CardCalculation = () => {
  return (
    <div className="flex justify-between items-start p-4 w-full max-w-md">
      {/* 左侧商品卡片 */}
      <div className="w-[120px] h-[100px] m-2 bg-[#d9d9d9] p-2 flex flex-col justify-around">
        <p className="text-xl text-left text-[#e44] font-bold">N RCO 250gr</p>
        <p className="text-sm text-left text-[#b4b4b4]">12x5cm</p>
        <p className="text-sm text-left text-[#b4b4b4]">Rp. 82.000</p>
      </div>
      {/* 右侧操作按钮组 */}
      <div className="flex flex-col gap-4">
        <div className="flex justify-center items-center gap-2.5 px-6 py-3 rounded-md border border-[#f7d716]">
          <svg
            width={24}
            height={24}
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="w-6 h-6"
          >
            <rect
              x={1}
              y={1}
              width={22}
              height={22}
              rx={11}
              stroke="#F7D716"
              strokeWidth={2}
            />
            <g clipPath="url(#clip0_83_406)">
              <rect
                width="12.6316"
                height="12.6316"
                transform="translate(5.68457 5.6842)"
                fill="#F7D716"
              />
              <path
                d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                fill="white"
              />
            </g>
            <defs>
              <clipPath id="clip0_83_406">
                <rect
                  width="12.6316"
                  height="12.6316"
                  fill="white"
                  transform="translate(5.68457 5.6842)"
                />
              </clipPath>
            </defs>
          </svg>
          <p className="text-lg text-[#f7d716]">Edit</p>
        </div>
        <div className="flex justify-center items-center gap-2.5 px-6 py-3 rounded-md border border-[#e44]">
          <svg
            width={24}
            height={24}
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className="w-6 h-6"
          >
            <rect
              x={1}
              y={1}
              width={22}
              height={22}
              rx={11}
              stroke="#EE4444"
              strokeWidth={2}
            />
            <g clipPath="url(#clip0_83_388)">
              <path
                d="M18.0226 7.74877C17.6318 7.35742 16.9972 7.35767 16.6058 7.74877L10.2292 14.1256L7.39513 11.2915C7.00378 10.9002 6.36942 10.9002 5.97808 11.2915C5.58673 11.6829 5.58673 12.3172 5.97808 12.7086L9.52058 16.2511C9.71612 16.4466 9.97254 16.5446 10.229 16.5446C10.4854 16.5446 10.7421 16.4469 10.9376 16.2511L18.0226 9.16579C18.414 8.77472 18.414 8.14009 18.0226 7.74877Z"
                fill="#EE4444"
              />
            </g>
            <defs>
              <clipPath id="clip0_83_388">
                <rect
                  width="12.6316"
                  height="12.6316"
                  fill="white"
                  transform="translate(5.68457 5.6842)"
                />
              </clipPath>
            </defs>
          </svg>
          <p className="text-lg text-[#e44]">Copy</p>
        </div>
      </div>
    </div>
  );
};
export default CardCalculation;

关键修改说明 #

• 外层容器：修正justify-between拼写错误，添加items-start保证顶部对齐，设置w-full max-w-md实现响应式宽度，添加p-4内边距避免元素贴边
• 左侧卡片：移除absolute，用flex flex-col justify-around垂直均匀排列文本，调整文本字号避免溢出
• 右侧按钮组：用flex flex-col gap-4垂直排列两个按钮，移除absolute和mt-20，让flex自动管理间距
• 按钮内部：调整px-6替代过宽的px-[84px]，保证按钮宽度合适，同时保留图标和文字的对齐

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