CSS实现：父Div内子元素偏离中心且不影响其他子元素布局

问题场景 #

希望Child3靠右对齐，Child2始终保持在父容器中心——移除Child1时Child2完全居中，添加Child1后它仍在中心，不会被挤偏。不想用绝对定位，有没有其他办法？

原示例代码 #

<nav className="flex flex-row justify-between items-center w-full h-[100px]">
    <div className="flex flex-row items-center sm:pl-0 ml-auto">
        <div className="mr-10">
            Child 1
        </div>
        <p className="text-center">Child 2</p>
    </div>

    <div className="ml-auto">
        <p>Child 3</p>
    </div>
</nav>

无需绝对定位的两种解决方案 #

方案1：Grid布局（推荐）

利用Grid的等分布局特性，让中间元素天然居中，左右区域自动平分剩余空间，完全不会互相干扰：

<nav className="grid grid-cols-[1fr_auto_1fr] items-center w-full h-[100px]">
    <!-- 左侧区域：靠右对齐，和原布局的mr-10对应 -->
    <div className="flex justify-end pr-10">
        Child 1
    </div>
    <!-- 中间元素：自动处于容器正中心 -->
    <p>Child 2</p>
    <!-- 右侧区域：靠左对齐 -->
    <div className="flex justify-start">
        Child 3
    </div>
</nav>

原理：grid-cols-[1fr_auto_1fr]定义三列，第一、三列都是1fr，会平分容器左右的剩余空间，中间列自适应宽度，所以Child2始终在正中心。移除Child1后，左侧区域只是空容器，不影响中间元素的位置。

方案2：Flex布局优化

通过给左右容器设置相同的flex:1，让它们平分剩余空间，同时父容器保证中间元素居中：

<nav className="flex items-center justify-center w-full h-[100px]">
    <!-- 左侧容器：flex:1占满左侧剩余空间，内部靠右对齐 -->
    <div className="flex justify-end flex-1 pr-10">
        Child 1
    </div>
    <!-- 中间元素：被父容器justify-center固定在中心 -->
    <p>Child 2</p>
    <!-- 右侧容器：flex:1占满右侧剩余空间，内部靠左对齐 -->
    <div className="flex justify-start flex-1">
        Child 3
    </div>
</nav>

原理：父容器的justify-center让中间元素优先居中，左右两个flex:1的容器会平分容器左右的剩余空间，所以不管左侧有没有Child1，中间元素的位置都不会偏移。

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