React+styled-components项目中发票卡片动态边距对齐问题如何解决？

解决方案 #

你的问题核心是布局结构不合理：当前将卡片内部分为左右两个独立flex容器，靠justify-content: space-between撑开间距，左侧内容总长度变化时，姓名和价格的间距自然会出现波动，无法保证多卡片列对齐。推荐直接使用CSS Grid布局实现统一列控制，修改方案如下：

核心修改点

1. 把卡片根容器从flex布局改为grid布局，提前定义好每一列的宽度规则，所有卡片自动遵循相同列宽，天然实现对齐
2. 移除左侧UserInfo、右侧PaymentInfo两个冗余的flex包裹层，所有字段直接作为卡片容器的子元素
3. 用grid的gap属性统一控制列间距，删除各字段单独设置的固定margin-right

修改后的完整代码

import React from "react";
import styled from "styled-components";
import { ReactComponent as RightIcon } from "../../../images/icon-arrow-right.svg";
import data from "../data/invoices.json";

const InvoiceCardComponent = styled.li`
  font-size: 1.2rem;
  line-height: 1.5rem;
  padding: 1.6rem 3.2rem;
  box-shadow: 0px 10px 10px -10px rgba(72, 84, 159, 0.1);
  /* 替换原来的flex为grid布局 */
  display: grid;
  /* 列宽可根据设计稿实际尺寸调整，1fr表示姓名列占剩余所有可用空间 */
  grid-template-columns: 7rem 11rem 1fr 9rem 10.4rem 2rem;
  align-items: center;
  /* 统一列间距，可根据需求调整 */
  column-gap: 2rem;
  border-radius: 8px;
  background-color: ${({ theme }) => theme.colors.white};
  &:not(:last-child) {
    margin-bottom: 1.6rem;
  }
`;

const Id = styled.p`
  font-weight: 700;
`;

const HashTag = styled.span`
  color: ${({ theme }) => theme.colors.shipCove};
`;

const Date = styled.p`
  color: ${({ theme }) => theme.colors.baliHai};
`;

const Time = styled.time``;

const Name = styled.p`
  color: ${({ theme }) => theme.colors.baliHai};
  /* 姓名过长时自动截断加省略号，可选配置 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const Price = styled.p`
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.4rem;
  /* 价格默认右对齐更符合设计习惯，可按需调整 */
  text-align: right;
`;

const Status = styled.p`
  font-weight: 700;
  color: ${({ theme }) => theme.colors.success};
  text-transform: capitalize;
  display: flex;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.lightSuccess};
  min-width: 10.4rem;
  padding: 1.3rem 0;
  justify-content: center;
  border-radius: 6px;
`;

const StatusIcon = styled.span`
  display: inline-block;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  background-color: ${({ theme }) => theme.colors.success};
  margin-right: 8px;
`;

const InvoiceCard = () => {
  const renderInvoices = data.map((invoice) => {
    const date = new window.Date(invoice.paymentDue);
    const month = date.toLocaleString("en-US", { month: "short" });
    const day = date.getDate();
    const year = date.getFullYear();
    const formattedTotal = invoice.total.toLocaleString("en-US", {
      currency: "GBP",
      style: "currency",
    });

    return (
      <InvoiceCardComponent key={invoice.id}>
        {/* 移除了UserInfo和PaymentInfo包裹层 */}
        <Id>
          <HashTag>#</HashTag>
          {invoice.id}
        </Id>
        <Date>
          <Time dateTime={invoice.paymentDue}>
            Due {day} {month} {year}
          </Time>
        </Date>
        <Name>{invoice.clientName}</Name>
        <Price>{formattedTotal}</Price>
        <Status>
          <StatusIcon></StatusIcon>
          {invoice.status}
        </Status>
        <RightIcon />
      </InvoiceCardComponent>
    );
  });

  return <React.Fragment>{renderInvoices}</React.Fragment>;
};

export default InvoiceCard;

如果需要调整列的宽度，直接修改grid-template-columns里的对应数值即可，所有卡片会同步生效，完全满足对齐要求。

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