使用justify-content:space-between时，如何固定MUI Flex容器内项目间距？

问题根源在于你使用了justifyContent: "space-between"，这种布局会把容器的剩余空间平均分配到子组件之间。当子组件（比如计时器）的宽度随内容（个位数/多位数）变化时，剩余空间的计算也会改变，最终导致组件间的间距波动。以下是几种可行的解决方法：

方法1：给子组件设置固定宽度 #

直接为每个子组件指定固定宽度，确保它们的尺寸不随内容变化，这样space-between分配的间距就会保持稳定。如果子组件内的内容需要居中，可额外添加对齐样式。

function gameInfo() {
  return (
    <>
      <Container
        sx={{
          width:'100%',
          borderRadius: '16px',
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <Seconds sx={{ width: "80px", display: "flex", justifyContent: "center" }}></Seconds>
        <Points sx={{ width: "80px", display: "flex", justifyContent: "center" }}></Points>
        <Lives sx={{ width: "80px", display: "flex", justifyContent: "center" }}></Lives>
      </Container>
    </>
  );
}

export default gameInfo;

方法2：用gap属性控制固定间隙 #

给flex容器设置gap值直接定义组件间的固定间距，搭配justifyContent调整整体对齐方式，彻底避免间距随子组件宽度变化。

如果希望组件保持左右两端对齐：

function gameInfo() {
  return (
    <>
      <Container
        sx={{
          width:'100%',
          borderRadius: '16px',
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          gap: "2rem", // 自定义固定间隙大小
        }}
      >
        <Seconds></Seconds>
        <Points></Points>
        <Lives></Lives>
      </Container>
    </>
  );
}

export default gameInfo;

如果希望三个组件均匀占据容器宽度：

function gameInfo() {
  return (
    <>
      <Container
        sx={{
          width:'100%',
          borderRadius: '16px',
          display: "flex",
          flexDirection: "row",
          gap: "1rem",
        }}
      >
        <Seconds sx={{ flex: 1, display: "flex", justifyContent: "center" }}></Seconds>
        <Points sx={{ flex: 1, display: "flex", justifyContent: "center" }}></Points>
        <Lives sx={{ flex: 1, display: "flex", justifyContent: "center" }}></Lives>
      </Container>
    </>
  );
}

export default gameInfo;

方法3：改用Grid布局 #

Grid布局能更精准地控制组件位置和间距，适合需要稳定布局的场景。

三列等宽且居中对齐：

function gameInfo() {
  return (
    <>
      <Container
        sx={{
          width:'100%',
          borderRadius: '16px',
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: "1.5rem", // 固定列间隙
          alignItems: "center",
        }}
      >
        <Seconds sx={{ display: "flex", justifyContent: "center" }}></Seconds>
        <Points sx={{ display: "flex", justifyContent: "center" }}></Points>
        <Lives sx={{ display: "flex", justifyContent: "center" }}></Lives>
      </Container>
    </>
  );
}

export default gameInfo;

左右组件自适应宽度、中间组件占满剩余空间：

function gameInfo() {
  return (
    <>
      <Container
        sx={{
          width:'100%',
          borderRadius: '16px',
          display: "grid",
          gridTemplateColumns: "auto 1fr auto",
          gap: "2rem",
          alignItems: "center",
        }}
      >
        <Seconds></Seconds>
        <Points sx={{ textAlign: "center" }}></Points>
        <Lives></Lives>
      </Container>
    </>
  );
}

export default gameInfo;

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli