使用Spacer时如何将Box精准居中对齐到Flex容器中央？

针对左右元素宽度不同、两个等宽Spacer导致中间紫色Box偏右的问题，以下两种方案可以在保留Flex和Spacer的前提下解决：

方案1：拆分左右容器，让两侧空间自动平分 #

调整布局结构，把左侧元素+对应Spacer、右侧元素+对应Spacer分别放在两个占满剩余空间的子Flex容器中：

<Flex width="100%">
  {/* 左侧容器：占左半部分空间，元素靠左 */}
  <Flex flex={1}>
    <LeftElement />
    <Spacer />
  </Flex>
  {/* 中间紫色Box自动处于容器正中央 */}
  <PurpleBox />
  {/* 右侧容器：占右半部分空间，元素靠右 */}
  <Flex flex={1}>
    <Spacer />
    <RightElement />
  </Flex>
</Flex>

原理是左右两个子Flex容器各占父容器一半宽度，左侧元素在子容器内靠左对齐，右侧元素在子容器内靠右对齐，中间的紫色Box会精准对齐父容器的正中央，同时保留了Spacer的使用。

方案2：给Spacer设置动态flex值（适配固定宽度的左右元素） #

如果左右元素是固定宽度，可通过调整Spacer的flex比例，抵消左右元素的宽度差：
假设LeftElement宽度为120px，RightElement宽度为80px，代码如下：

<Flex width="100%">
  <LeftElement style={{ width: '120px' }} />
  <Spacer flex={1} /> {/* flex值对应右侧元素的宽度权重 */}
  <PurpleBox />
  <Spacer flex={1.5} /> {/* flex值 = 左侧宽度/右侧宽度 = 120/80 = 1.5 */}
  <RightElement style={{ width: '80px' }} />
</Flex>

通过设置Spacer的flex比例，让两个Spacer的宽度差抵消左右元素的宽度差，从而让紫色Box回到容器正中央。

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