React中如何使用CSS实现Card组件内元素均匀对齐排列

问题复现 #

实现目标是让Card头部内的三组信息均匀对齐、间距随卡片宽度自适应，当前效果异常：

现有结构代码：

<div className="card">
    <header className="card-header">
        <div className="card-header-info">
            <p>{`#${driver.driverId}`}</p>
            <h1>{driver.name}</h1>
        </div>
        <div className="card-header-info">
            <p>VEHICLE</p>
            <p>{driver.vehicleId}</p>
        </div>
        <div className="card-header-info">
            <p>HOMETOWN</p>
            <p>{driver.hometown}</p>
        </div>
    </header>
</div>

原有异常样式：

.card-header-info {
    padding-left: 20px;
    margin-right: auto;
}

修复方案 #

对齐失效的核心原因是仅给子元素设置了margin规则，没有给父容器配置对应的布局模式，浏览器无法按照弹性分布规则计算元素位置。 直接用原生Flex布局即可实现需求，不需要依赖Bulma的列布局，代码简洁且自适应效果稳定。

1. 首先给父容器.card-header添加弹性布局规则，这步是之前缺失的核心配置：

.card-header {
  display: flex;
  width: 100%;
  /* 子元素垂直居中，按需保留 */
  align-items: center;
  /* 均匀分配间距，可根据需求替换取值 */
  justify-content: space-between;
}

2. 调整子元素.card-header-info的样式，删除会干扰弹性布局计算的margin-right: auto：

.card-header-info {
  padding-left: 20px;
}

间距模式选择 #

justify-content的三个取值对应不同的均匀分布效果，可以根据设计需求选择：

• space-between：首尾子元素贴紧容器内边距边缘，剩余空间平均分配给元素之间的间隙，是卡片类场景最常用的取值
• space-around：每个子元素左右两侧分配相等的间距，视觉上首尾到容器边缘的间隙是元素中间隙的一半
• space-evenly：所有间隙（包括首尾到容器边缘的间隙、元素之间的间隙）完全相等，均匀度最高

如果卡片本身已经设置了左右内边距，优先选space-between即可，不会出现内容贴边的问题，卡片宽度变化时间距会自动重算，完全满足自适应要求。

之前用Bulma列布局没生效，通常是没有给列设置正确的宽度占比、或者父容器宽度约束缺失导致的，原生Flex方案不需要记忆框架类名规则，兼容性覆盖所有主流浏览器。

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