如何调整卡片CSS实现内容左对齐与间距均匀，保证所有卡片样式统一

调整方案 #

你当前的问题出在justify-content: space-between会让元素间距随内容长度动态变化，没有统一的对齐规则，也没有固定的元素间距约束，调整按照以下几步操作即可： #

1. 修改卡片容器CSS样式

替换原有card类的配置，改用左对齐+统一间距控制：

card: {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-start', // 所有元素从左侧开始排列，实现左对齐
  gap: '1.5rem', // 全局统一子元素间距，不需要单独给每个元素加margin
  border: 'solid 1px #f0eff2',
  padding: '0.75rem 1rem', // 统一上下左右内边距，避免内容贴边
  width: '100%',
  boxSizing: 'border-box', // 避免边框、内边距撑宽卡片，保证所有卡片宽度一致
},

2. 新增子元素样式，保证各列对齐

给不同功能的内容块设置固定的宽度占比，避免内容长短不一导致错位：

title: {
  flex: 2, // 标题占2份宽度
  minWidth: '120px',
  textAlign: 'left',
},
description: {
  flex: 3, // 描述占3份宽度
  minWidth: '200px',
  textAlign: 'left',
  // 用CSS实现文本省略，比JS截取字符串更统一，不会出现字符宽度差异导致的长度不一致
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  /* 要多行省略就替换成下面的配置，2就是最多显示2行
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  */
},
time: {
  flex: 1,
  minWidth: '80px',
  textAlign: 'left',
  color: '#666',
},
// 图标容器统一固定尺寸，禁止压缩，保证操作区大小一致
iconWrap: {
  width: '32px',
  height: '32px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexShrink: 0,
}

3. 修改React代码，绑定对应类名

<div className={classes.card}>
  <Checkbox />
  <div className={classes.title}>{title}</div>
  <div className={classes.description}>{description}</div>
  <div className={classes.time}>{time}</div>
  <div className={classes.iconWrap}>
    {favourite ? (
      <BookmarkIcon className={classes.gold} />
    ) : (
      <BookmarkTwoToneIcon />
    )}
  </div>
  <div className={classes.iconWrap}>
    <IconButton>
      <MoreIcon />
    </IconButton>
  </div>
</div>

以上调整后所有卡片的每一列位置都会完全对齐，元素间距统一，不会出现内容变化导致的样式错位问题。

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